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);

}

Owais · Accepted Answer · 2017-02-22 19:30:45Z

10

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.

answered Feb 22, 2017 at 19:30

Owais

8602 gold badges13 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

shawty · Accepted Answer · 2017-02-22 19:30:02Z

2

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.

answered Feb 22, 2017 at 19:30

shawty

5,8692 gold badges44 silver badges73 bronze badges

4 Comments

Alma Over a year ago

what is item in mydata.GridData.forEach(item), the Data is exactly like you have mansion.

shawty Over a year ago

It's the current object that your iterating. You use that as your gateway to access the current element in your loop as my examples clearly show.

Edeph Over a year ago

This is actually wrong you can't access it as myData.GridHeader.Id. In the forEach structure you can access each element of the array through the item which holds the current element's data.

shawty Over a year ago

You know what, your absolutely right, if that's what I was doing. But if you reread my answer, instead of skipping the detail, and read it carefully, you'll actually see that your the one who's wrong. Downvote yourself by 1 while your there ;-) then try again.

Collectives™ on Stack Overflow

Iterate Json Data in JavaScript/TypeScript

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related