javascript - 如何从 JSON 中获取索引并将它们放入 HTML 表中?
问题描述
我有以下问题:
我有一个用于获取 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
:
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]);
}
}
或者看看我在你的所有功能中添加的小提琴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>"));
}
推荐阅读
- java - 从父 pom 覆盖依赖版本的推荐方法是什么?
- django - 结合 Django Rest 中的海量模型
- php - php会话未重定向到欢迎页面(postgresql)
- android - Android Studio Bumblebee 2021.1.1 Canary 4 Emulator 无法在 m1 上运行
- python - 为什么 `.readlines()` 之后的`for line in f` 不打印任何内容?
- python - 连接字符串('not float')
- swift - info.plist 中的网络身份验证。获取当前 Wifi
- c++ - 不断打印“hello world”
- vue.js - VueJS:缓存组件数据的推荐方式
- gremlin - Gremlin 递归删除顶点