Javascript 如何从json数据生成表？

我是javascript的新手

我从这个答案看

但是，我有另一个数据集，我们可以称之为data2

var data2 = [
 {
  "key" : "Quantity" ,
  "bar": true,
  "values" : [ [ 1136005200000 , 1271000.0] ]
 } ,
 {
  "key" : "Price" ,
  "values" : [ [ 1136005200000 , 71.89] ]
 }
]

我尝试过修改代码，如下所示：

$(data2.Quantity).each(function(index, element){
     $('#table1').append('<tr><td> '+element[0]+' </td> <td> '+element[1]+' </td>   </tr>');       
})

但表仍然无法从数据2生成，我想生成表中每个键的数量、价格

我的全部代码在这里

我怎么能做到

---

谢谢

我想这会对你有用：-

Javascript

 data2.forEach(function(obj){
    $('#table1').append('<tr><td> '+obj["key"]+' </td></tr>');
})

---

我可能误解了你的问题，但请随时纠正我。我已经创建了一个div，其中每个data2中的值都有表。此外，data2似乎有一些不正确的结构，因此我更正的结构是：

var data2 = [{
    "key": "Quantity",
    "bar": true,
    "values": [1136005200000, 1271000.0]
}, {
    "key": "Price",
    "values": [1136005200000, 71.89]
}]

实现这些表的javascript是：

$(data2).each(function (index, element) {
    var tableId = 'table' + index;
    var tableContainer = $('#tableContainer').append('<table border="2" id="' + tableId + '"><tr><td> ' + element.key + ' </td> <td> </td></tr></table>');
    var table = tableContainer.find('#' + tableId);
    $(element.values).each(function (i, value) {
        table.append('<tr><td> ' + value + ' </td> <td> </td></tr>');
    });
});

---

Fiddle:

当您在数组中循环时，您有一个键值对数据。您需要循环该数组中的每个元素，如果该键是所需的键，则选择其值

javascript中的键由element.key调用

这些值存储在数据2中的值键中

完整代码：

var data = { "scores" : [ ["3/1/2011", 610],["4/1/2011", 610],["5/1/2011", 610],["6/1/2011", 610], ["7/1/2011", 720], ["8/1/2011", 500], ["9/1/2011", 500] ] }


var data2 = [
  {
    "key" : "Quantity" ,
    "bar": true,
    "values" : [ 1136005200000 , 1271000.0]
  } ,
  {
    "key" : "Price" ,
    "values" : [ 1136005200000 , 71.89]
  }
]

$(data.scores).each(function(index, element){
     $('#scores').append('<tr><td> '+element[0]+' </td> <td> '+element[1]+' </td></tr>');       
});


$(data2).each(function(index, element){
    if(element.key == "Quantity") {
        for(i=0; i<element.values.length; i++) {
            $('#table1').append('<tr><td> '+element.values[i][0]+' </td> <td> '+element.values[i][1]+' </td></tr>');
        }
    }
});

---

你是说生成表中的每个键都是这样的：-数量价格是的，这就是我的意思$data2。数量。每个。。。假设data2.Quantity既存在又存在。不幸的是，这些细节都不是真的。data2是一个数组，这意味着默认情况下，如果不遍历它，就无法从中访问值。你应该看看用另一个。哇，谢谢！这是工作…但是当我想添加一些值时，例如我修改了这个JSFIDLE，表是错误的，我想将每个值放在一行中，我怎么做？我想你应该在这种情况下使用循环。

$(data2).each(function(index, element){
    if(element.key == "Quantity") {
        for(i=0; i<element.values.length; i++) {
            $('#table1').append('<tr><td> '+element.values[i][0]+' </td> <td> '+element.values[i][1]+' </td></tr>');
        }
    }
});

var data = { "scores" : [ ["3/1/2011", 610],["4/1/2011", 610],["5/1/2011", 610],["6/1/2011", 610], ["7/1/2011", 720], ["8/1/2011", 500], ["9/1/2011", 500] ] }


var data2 = [
  {
    "key" : "Quantity" ,
    "bar": true,
    "values" : [ 1136005200000 , 1271000.0]
  } ,
  {
    "key" : "Price" ,
    "values" : [ 1136005200000 , 71.89]
  }
]

$(data.scores).each(function(index, element){
     $('#scores').append('<tr><td> '+element[0]+' </td> <td> '+element[1]+' </td></tr>');       
});


$(data2).each(function(index, element){
    if(element.key == "Quantity") {
        for(i=0; i<element.values.length; i++) {
            $('#table1').append('<tr><td> '+element.values[i][0]+' </td> <td> '+element.values[i][1]+' </td></tr>');
        }
    }
});