Question

我有一个JSON文件，想要构建一个包含2列的表：

{
    "Some name 1": {
        "price": 1023,
        "quantity": 93
    },
    "Some name 2": {
        "price": 2938,
        "quantity": 64
    },
    "Some name 3": {
        "price": 1277,
        "quantity": 211
    }
}

我试过了：

$.getJSON('http://localhost:8080/data.json', function (data) {
    for (x in data) {
        document.getElementById(getTDID).innerHTML += x; // First column
        console.log(data[i].price);  // Second column
        console.log(x["quantity"]); // or another variant of second column
    }
}

第一栏有效。但第二......我想提取这两个价值（价格和数量），但它不起作用。所以现在我没有想法。请帮忙。

Answer 1

您无法访问每个密钥的值。试试这个：

for (const x of Object.keys(data)) {
    console.log(data[x]);
}

Answer 2

我的错误是data[x].price而不是data[i].price.

Answer 3

您可以尝试这样

$.getJSON('http://localhost:8080/data.json', function (data) {
    for (x in data) {
        console.log(data[x].price);  // First column
        console.log(data[x].quantity); // Second column
    }
}

Answer 4

很少有观察结果：

data[i].price应为data[x].price。
x["quantity"]应为data[i].quantity。
创建TABLE，TR＆amp; TD元素用于显示表中的值。

工作演示

var jsonObj = {
    "Some name 1": {
        "price": 1023,
        "quantity": 93
    },
    "Some name 2": {
        "price": 2938,
        "quantity": 64
    },
    "Some name 3": {
        "price": 1277,
        "quantity": 211
    }
};

var x = document.createElement("TABLE");
x.setAttribute("id", "myTable");
document.body.appendChild(x);
  
for (i in jsonObj) {

  var y = document.createElement("TR");
  y.setAttribute("id", "myTr");
  document.getElementById("myTable").appendChild(y);

  var x = document.createElement("TD");
  var nameNode = document.createTextNode(i);
  x.appendChild(nameNode);
  document.getElementById("myTr").appendChild(x);

  var price = document.createElement("TD");
  var priceNode = document.createTextNode(jsonObj[i].price);
  price.appendChild(priceNode);
  document.getElementById("myTr").appendChild(price);

  var quantity = document.createElement("TD");
  var quantityNode = document.createTextNode(jsonObj[i].quantity);
  quantity.appendChild(quantityNode);
  document.getElementById("myTr").appendChild(quantity);
  
}

table, td {
    border: 1px solid black;
}

解析JSON对象。提取子项

4 个答案: