如何将动态 JSON 数组输出到 HTML 表中？答案

【问题标题】：How can I output a dynamic JSON array into a HTML table?如何将动态 JSON 数组输出到 HTML 表中？
【发布时间】：2019-08-28 06:30:45
【问题描述】：

我有一个函数，它在按下按钮时被调用并添加到数组order：

var order = [];

function updateCart(item) {
    var index = order.findIndex(i => i.id == item.id);
    if (index != -1) {
        order.splice(index, 1);
        order.push(item);
    } else {
        order.push(item);
    }
    $("#test").html(JSON.stringify(order));            
}

如果用户添加 2 个项目和 1 个项目，则 order 可能如下所示：

[{"id":1,"name":"Hawaiian","price":10,"qty":2},
 {"id":2,"name":"New Yorker","price":10,"qty":1}];

我希望能够遍历数组中的每个项目，并拥有一个可以以易于阅读的方式显示每个订单的 HTML 表格。例如：

<table>
    <thead>
        <tr>
            <th>Item</th>
            <th>Quantity</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>order[0].name</td>
            <td>order[0].qty</td>
        </tr>

        <tr>
            <td>order[1].name</td>
            <td>order[1].qty</td>
        </tr>
    </tbody>
</table>

如果我将数组传递给我的表，那么它似乎只是替换了整个表，而不是将值传递到我指定的位置。看我下面的例子：

<script>
$("#test").html(JSON.stringify(order));  
</script>

<table id="myTable">
    <thead>
        <tr>
            <th>Item</th>
            <th>Quantity</th>
        </tr>
    </thead>

    <tbody>
        <script>
            for (var i = 0; i < order.length; i++) {
                document.write("<tr>");
                    document.write("<td>");
                        document.write(order[i].name);
                    document.write("</td>");
                document.write("</tr>");
            }
        </script>
        <tr>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

我想知道是否有更简单的方法来做我想做的事。 HTML DOM 表看起来很笨重。谢谢

【问题讨论】：

标签： javascript html arrays json dom

【解决方案1】：

您可以使用map。

HTML：

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
  </thead>
  <tbody id="test">

  </tbody>
</table>

JS：

const order = [
  { id: 1, name: "Hawaiian", price: 10, qty: 2 },
  { id: 2, name: "New Yorker", price: 10, qty: 1 }
];

const singleRow = ({ name, qty }) => `<tr><td>${name}</td><td>${qty}</td></tr>`;
$("#test").html(order.map(singleRow).join(''));

https://codepen.io/anon/pen/MReZdL

【讨论】：