Question

我有一个json文件，我想用Javascript将数据转换成表。我发现了一些类似的问题How to convert the following table to JSON with javascript?，loop through a json object，但是它们都使用jQuery并在html Web上显示表格。我只需要一个简单的循环即可将行插入表中。我尝试了'append'，'insert'和'insertRow'，但都无效。有人可以给我一个提示吗？

Json文件：

{
"name": "lily",
"country": "china",
"age": 23
},
{
"name": "mike",
"country": "japan",
"age": 22
},
{
"name": "lucy",
"country": "korea",
"age": 25
 }

我的代码：

    var jdata = {};
    jdata.cols = [
        {
            "id": "1",
            "label": "name",
            "type": "string"
        },
        {
            "id": "2",
            "label": "country",
            "type":"string"
        }
    ];

    for(var i = 1; i < 3; i++){
        row = [
            {
                "c": [
                    {
                      "v": json["hits"]["hits"][i]["_source"]["name"]         
                    },
                    {
                       "v": json["hits"]["hits"][i]["_source"]["country"]
                    }
                ]
            }
        ];
        jdata.rows.insertRow(row);
    }

编辑：添加预期的输出：将json文件更改为以下结构。

[
    ['lily', 'china'],
    ['mike', 'japan'],
    ['lucy', 'korea'], 
  ]

Answer 1

我想您需要push（或者，如果要添加行数组，则需要concat / push（... elements）

    jdata.rows = [];
    for(var i = 1; i < 3; i++){
        row = [
            {
                "c": [
                    {
                      "v": json["hits"]["hits"][i]["_source"]["name"]         
                    },
                    {
                       "v": json["hits"]["hits"][i]["_source"]["country"]
                    }
                ]
            }
        ];
        jdata.rows.push(row);
        // for elements from row
        // jdata.rows.push(...row)
    }

Answer 2

您的代码中有一些错误

JSON必须是一个数组，以便您可以遍历每个对象进行显示。
insertRow()是Table对象的方法，jdata.rows不是Table对象，而是数组。

由于您使用过insertRow()，所以我重写了代码，以使用Table Object方法显示表数据。这是一个代码段

编辑：您可以使用push()方法来创建所需的JSON结构。我已经编辑了代码片段以创建所需的JSON。

var jdata = {
  cols: [{
      "id": "1",
      "label": "name",
      "type": "string"
    },
    {
      "id": "2",
      "label": "country",
      "type": "string"
    }
  ],
  rows: []
};

var persons = [{
    "name": "lily",
    "country": "china",
    "age": 23
  },
  {
    "name": "mike",
    "country": "japan",
    "age": 22
  }, {
    "name": "lucy",
    "country": "korea",
    "age": 25
  }
];

var table = document.getElementById("table");
var header = table.createTHead();
var footer = table.createTFoot();
var rowHeader = header.insertRow(0);

jdata.cols.forEach((col, index) => {
  var cell = rowHeader.insertCell(index);
  cell.innerHTML = col.label;
});

persons.forEach((person, index) => {
  var rowFooter = footer.insertRow(index);
  rowFooter.insertCell(0).innerHTML = person.name;
  rowFooter.insertCell(1).innerHTML = person.country;
  
  jdata.rows.push([person.name, person.country]);
});

console.log(jdata.rows);

<table id="table">

</table>

如何用循环在Javascript中插入一行？

2 个答案: