javascript - 是否可以使用我的 JSON 数据自动创建 HTML 表格字段？

Question

我正在构建一个基本计算器，它采用 JSON 数据和运费/费用/税等因素，并快速告诉我它是否值得购买。

我已经手动但成功地创建了一个表，并且一切正常!我是 JQuery 的新手，所以看到它的工作非常令人兴奋。

我的问题是，我手动创建了表格，我的 json 数据中有 70 多个项目。而且项目的数量总是在变化，所以我不能只做一个模板。我将展示我的代码示例:

<table> 
<tr> 
        <th>Good</th> 
        <th>Price</th>
        <th>Profit</th>
        <th>Item Page</th> 
        <th>Buy Link</th> 
</tr> 


<tr> 
        <td align="center" id="good">data</td> 
        <td align="center" id="price">data</td>
        <td align="center" id="profit">data</td>
        <td align="center" id="item">data</td>
        <td align="center" id="buy">data</td>
</tr> 
</table> 

$.getJSON('test.json', function(data) {
  var value = ((((data[0].rap * .9) - 375) * .9) / 100) * 6 - data[0].price
  var itempage = data[0].link
  var buylink = "http://shopping.com/" + data[0].shop + "/" + data[0].purchase_id
  var buyprice = data[0].price
  var worthit =  (value > 0) ? '<img style=width:10px; src="true.png">':'<img style=width:10px; src="false.png">';
  document.getElementById("profit").innerHTML = value.toFixed(2);
  document.getElementById("buy").innerHTML = ('<a href="' + buylink + '">Buy Item</a>');
  document.getElementById("item").innerHTML = ('<a href="' + itempage + '">Click Here</a>');
  document.getElementById("price").innerHTML = buyprice
  document.getElementById("good").innerHTML = worthit
});

[
  {
    "id": "2222720521",
    "link": "cheese.com",
    "rap": "53",
    "purchase_id": "s4PF4o",
    "price": "15.00",
  },
  {
    "id": "74891470",
    "link": "sausage.com",
    "rap": "12",
    "purchase_id": "oLeZpE",
    "price": "12.99",
  },
  {
    "id": "494291269",
    "link": "sauce.com",
    "rap": "12",
    "purchase_id": "BTwS5C",
    "price": "12.99",
  }
]

正如您在我的手册示例中看到的那样，我只使用了来自“data[0]”的数据。但是我的 JSON 有 70 多个数据对象。

是否可以使用数据自动创建表格行。老实说，我很困惑，甚至不知道从哪里开始。非常感谢任何帮助。

谢谢!

Answer 1

你需要遍历 data ，例如 .each (因为您使用 jQuery)或任何原生 JS 构造( .forEach 、 for ... of )。

对于其余部分，使用 $() 来充分使用 jQuery 似乎更好。选择器和 append方法，而不是使用 document创建嵌套内容的方法或 HTML 字符串。

$.getJSON('test.json', function(data) {
  $.each(data, function () {
    var value = ((((this.rap * .9) - 375) * .9) / 100) * 6 - this.price;
    $("table").append($("<tr>").append(
      $("<td>").addClass("good").append(
        $("<img>").css({width: 10}).attr("src", (value>0)+".png")
      ),
      $("<td>").addClass("price").text(this.price),
      $("<td>").addClass("profit").text(value.toFixed(2)),
      $("<td>").addClass("item").append(
        $("<a>").attr("href", this.link).text("Click here")
      ),
      $("<td>").addClass("buy").append( 
        $("<a>").attr("href", "http://shopping.com/" + this.shop + "/" + this.purchase_id)
                .text("Buy item")
      )
    ));
  });
});

请注意，您应该删除第一行的静态 HTML:所有行(标题除外)现在都是动态创建的。这也意味着您不能使用那些 id属性。我用过class属性而不是自 id值在整个 HTML 文档中必须是唯一的。

排序

在评论中，您询问了如何按利润对表格进行排序。由于利润是某些公式的结果，我首先建议为该计算创建一个函数。然后使用 sort具有比较函数(返回两个项目如何比较它们的利润)的数据方法，如下所示:

function profit(elem) {
    return ((((elem.rap * .9) - 375) * .9) / 100) * 6 - elem.price;
}

function compareProfit(a, b) {
    return profit(a) - profit(b); // negative => a comes before b in order of profit
}

$.getJSON('test.json', function(data) {
  data.sort(compareProfit); // sort data items by profit
  $.each(data, function () {
    var value = profit(this);
    $("table").append($("<tr>").append(
      $("<td>").addClass("good").append(
        $("<img>").css({width: 10}).attr("src", (value>0)+".png")
      ),
      $("<td>").addClass("price").text(this.price),
      $("<td>").addClass("profit").text(value.toFixed(2)),
      $("<td>").addClass("item").append(
        $("<a>").attr("href", this.link).text("Click here")
      ),
      $("<td>").addClass("buy").append( 
        $("<a>").attr("href", "http://shopping.com/" + this.shop + "/" + this.purchase_id)
                .text("Buy item")
      )
    ));
  });
});