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);
}
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);
}
Share Improve this question asked Feb 22, 2017 at 19:13 AlmaAlma 4,40013 gold badges46 silver badges87 bronze badges2 Answers
Reset to default 10Yes, 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.
Your going to have to explain in more detail what you mean by "iterate on the data".
{
"GridHeader":{
"Id":"Id",
"Name":"Full Name",
"Age":"Age"
},
"GridData":{
"Id":3,
"name":"Vu",
"age":34
}
}
Does not have any Arrays present in it.
If it did have arrays in it, then I'm going to assume you meant something like this:
"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
}
]
}
If your data looks like that, then you have an array of objects in your grid data, and you would then be able to use something like this:
mydata.GridData.forEach(item){
// DO something with
// item.Id
// item.Name
// item.Age
}
Within the loop your code will get called once for each object in the GridData part of your parent and allow you access to each of the 3 properties for each individual item.
However, looking at your data the way it is, then it's just a simple object.
If we imagine you have it in a variable called myData, then you can access it's parts as follows:
myData.GridHeader.Id
myData.GridHeader.Name
myData.GridHeader.Age
To get the header properties.
myData.GridData.Id
myData.GridData.Name
myData.GridData.Age
To get at the properties of the one and only non iterable object you have present.