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

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

您的代码中有一些错误

1. JSON 需要是一个数组，以便您可以循环显示每个对象。
2. insertRow() 是 Table 对象的方法，jdata.rows 不是 Table 对象而是数组。

由于您使用了insertRow()，我已经重写了您的代码以使用表对象方法显示表数据。这是一个代码sn-p

编辑：您可以使用push() 方法来创建所需的JSON 结构。我已经编辑了代码 sn-p 以创建您所需的 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>