Question

我是javascript中的新手，

我从这个答案看jQuery function to create table using JSON data

但是，我有另一个数据集，我们可以称之为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>');       
})

但是表格仍然无法从data2生成（我想生成每个键的表格（数量，价格）

我的完整代码http://jsfiddle.net/kVdZG/493/

我怎么能这样做？

由于

Answer 1

我认为这对你有用： -

的Javascript

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

Answer 2

我可能误解了你的问题，但请随时纠正我。我已经在data2中为每个值创建了一个包含表格的div。此外，data2似乎有一些不正确的结构，所以我的纠正＆＃34;结构是：

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>');
    });
});

小提琴： http://jsfiddle.net/KyleMuir/kVdZG/494/

Answer 3

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

javascript中的密钥由element.key调用。

这些值存储在data2。

中的“值”键中

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

您还指定了一个二维数组，这就是为什么只调用[0]不起作用的原因。您需要将其更改为[0][i]，其中i是循环中的元素。

$(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>');
        }
    }
});

Updated working JSFiddle

完整代码：

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>');
        }
    }
});

我如何从json数据生成表？

3 个答案: