如何使用把手呈現JSON數組

Question

我正在嘗試使用Handlebars.js渲染一個重復的UI組件。

<div class="container-fluid article-container">
    {{#each this}}
        <h1>{{header}}</h1>
        <h1>{{url}}</h1>
        <h1>{{body}}</h1>
    {{/each}}
</div>

從API服務器返回的JSON數據如下所示。

router.get("/api/fetch", function(req, res) {
  var respData = [
    {
      header: "U.S. Releases Surveillance Records of Ex-Trump Aide",
      url:
        "https://www.nytimes.com/2018/07/21/us/politics/carter-page-fisa.html",
      body:
        "The release offered a rare glimpse of national security wiretap files and raised echoes of a fight in February over the Russia inquiry between Republicans and Democrats on the House Intelligence Committee."
    }
  ];
  res.render("index", respData);
});

當瀏覽器呈現頁面時，H1標簽在UI中顯示為空。.有人可以幫幫我嗎？

Answer 1

例如，如果您的api數據是這樣返回的：

var icecreams = [
  { name: "vanilla", price: 10, awesomeness: 3 },
  { name: "chocolate", price: 4, awesomeness: 8 },
  { name: "banana", price: 1, awesomeness: 1 },
  { name: "greentea", price: 5, awesomeness: 7 },
  { name: "jawbreakers", price: 6, awesomeness: 2 },
  { name: "vanilla", price: 10, awesomeness: 3 }
];

然后您的handlebar文件將是

{{#each ics}}
  <p>Flavor: {{name}}</p>
  <p>Price: ${{price}}</p>
  <p>Awesomeness: {{awesomeness}}</p>
  <hr>
{{/each}}

快速路線：

app.get("/icecreams", function(req, res) {
  res.render("ics", { ics: icecreams });
});

這將渲染所有的冰淇淋。 對於您的示例，它將僅呈現一個。

此示例摘自我的一個演示。