Question

我需要迭代这个Json数据，并在JavaScript（TypeScript）No Jquery中为Grid添加值。

{"GridHeader":{"Id":"Id","Name":"Full Name","Age":"Age"},"GridData":{"Id":3,"name":"Vu","age":34}}

我有如下的Add函数，它将标题和数据添加到Grid：

 let header = '{"GridHeader":{"Id":"Id","Name":"Full Name","Age":"Age"},"GridData":{"Id":3,"name":"Vu","age":34}}';
let myheader = JSON.parse(header);


for (var i = 0; ??) {
   ....

    AddRecord(headerdata, i);
}

这是我将它添加到网格的地方：

function AddRecord(record, n) {
var detail = document.getElementById("detail");
var header = document.getElementById("header");

if (n == 0) {
    var newdiv = document.createElement("div");
    newdiv.innerHTML = "<div style=''>" + record.id + "</div>" + "<div>" + record.name + "</div>" + "<div>" + record.age + "</div>";
}

var newdiv = document.createElement("div");
newdiv.innerHTML = "<div style=''>" + record.id + "</div>" + "<div>" + record.name + "</div>" + "<div>" + record.age + "</div>";
detail.appendChild(newdiv);

}

Answer 1

是的，您的数据实际上是以下javascript对象：

var header = {
    "GridHeader":{"Id":"Id","Name":"Full Name","Age":"Age"},
  "GridData":   {"Id":3,"name":"Vu","age":34}
  };

你可以像下面这样循环：

for (var prop in header) {
        console.log("Key:" + prop);
        console.log("Value:" + header[prop]);
    }

请根据您的需要制作。我已经给你一个迭代它的线索。感谢。

Answer 2

您需要通过“迭代数据”更详细地解释您的意思。

{
   "GridHeader":{
      "Id":"Id",
      "Name":"Full Name",
      "Age":"Age"
   },
   "GridData":{
      "Id":3,
      "name":"Vu",
      "age":34
   }
}

其中没有任何数组。

如果它确实有数组，那么我会假设你的意思是这样的：

"mydata":{
   "GridHeader":{
      "Id":"Id",
      "Name":"Full Name",
      "Age":"Age"
   },
   "GridData":[
        {
          "Id":3,
          "name":"Vu",
          "age":34
        },
        {
          "Id":2,
          "name":"Vu2",
          "age":33
        },
        {
          "Id":1,
          "name":"Vu1",
          "age":32
        }
   ] 
}

如果您的数据看起来像那样，那么您的网格数据中就有一系列对象，然后您就可以使用以下内容：

mydata.GridData.forEach(item){
  // DO something with
  // item.Id
  // item.Name
  // item.Age
}

在循环中，您的代码将在父级的GridData部分中为每个对象调用一次，并允许您访问每个项目的3个属性中的每一个。

但是，按照它的方式查看数据，那只是一个简单的对象。

如果我们想象你在一个名为myData的变量中有它，那么你可以按如下方式访问它的部分：

myData.GridHeader.Id
myData.GridHeader.Name
myData.GridHeader.Age

获取标题属性。

myData.GridData.Id
myData.GridData.Name
myData.GridData.Age

获取您所呈现的唯一且不可迭代的对象的属性。

在JavaScript / TypeScript中迭代Json数据

2 个答案: