如何从 JSON 中获取索引并将它们放入 HTML 表中？答案

【问题标题】：How to get indexes from JSON and put them into the HTML table?如何从 JSON 中获取索引并将它们放入 HTML 表中？
【发布时间】：2019-01-12 12:49:42
【问题描述】：

我有一个问题：

我有一个用于获取 JSON 的 JS 代码，该代码可在某些 URL 上找到，并绘制一个表格。 JSON 看起来像这样：

[{"price":12437,
  "quantity":4,
  "name":"\u0421\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a"},
 {"price":17043,
  "quantity":6,
  "name":"\u0412\u043e\u0434\u0430 \u0431\u0443\u0442\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f"},         
 {"price":10594,
  "quantity":4,
  "name":"\u0428\u043a\u0430\u0444 \u043a\u043d\u0438\u0436\u043d\u044b\u0439"},
 {"price":17965,
  "quantity":7,
  "name":"\u0427\u0430\u0439\u043d\u0438\u043a \u044d\u043b\u0435\u043a\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0439"},
 {"price":14280,
  "quantity":5,
  "name":"\u041b\u0430\u0437\u0435\u0440\u043d\u044b\u0439 \u043f\u0440\u0438\u043d\u0442\u0435\u0440"}]

代码在这里：https://jsfiddle.net/3p5ge0h9/。我需要获取 JSON 中每个对象的索引并将它们放入 HTML 表中（放入名为“ID”的列中）。怎么做？提前谢谢你。

【问题讨论】：

尝试将索引从for 循环传递给您的行渲染函数。
那么您已经尝试过什么？在此处发布相关代码的缩小版

标签： javascript jquery html json datatables

【解决方案1】：

尝试使用for：

for (var i = 0; i < your_array.length; i++){
    // log each from your array
    // where 'i' is the index that you try to find
    console.log(your_array[i]);

  }
}

或者看看fiddle 我在你的所有函数中添加index

这里：

    function drawTable(data) {
        for (let i = 0; i < data.length; i++) {
            drawRow(i, data[i]);
        }
    }

这里：

        function drawRow(index, rowData) {
            let row = $("<tr class='table-data' />"),
                productSum = rowData.quantity * rowData.price;
            $(".products_table tbody").append(row);
            row.append($("<td>" + index + "</td>"));
            row.append($("<td>" + rowData.name + "</td>"));
            row.append($("<td>" + rowData.quantity + "</td>"));
            row.append($("<td>" + rowData.price + "</td>"));
            row.append($("<td>" + productSum + "</td>"));
        }

【讨论】：

非常感谢，您的回答对我有帮助

【解决方案2】：

我像 20yco 一样解决了这个问题：

 drawTable(data);
        function drawTable(data) {
            for (let i = 0; i < data.length; i++) {
                drawRow(i+1, data[i]);
            }
        }

        function drawRow(index, rowData) {
            let row = $("<tr class='table-data' />"),
                productSum = rowData.quantity * rowData.price;
            $(".products_table tbody").append(row);
            row.append($("<td>" + index + "</td>"));
            row.append($("<td>" + rowData.name + "</td>"));
            row.append($("<td>" + rowData.quantity + "</td>"));
            row.append($("<td>" + rowData.price + "</td>"));
            row.append($("<td>" + productSum + "</td>"));
        }

您可以在此处查看完整的表格：https://sashajarvi.github.io/products-table-json/table.html

【讨论】：