Iterate Json Data in JavaScript/TypeScript

Question

I need to Iterate on this Json Data and add value to the Grid in JavaScript(TypeScript) No Jquery.

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

I have the Add function as follows which add header and Data to the 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);
}

This is where I am adding it to the Grid:

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

Yes, your data is actually a javascript object below:

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

And you can loop through it like below:

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

Please, make it according to your needs. I have give you a clue to iterate it. Thanks.