JavaScript loop through JSON array?

Question

I am trying to loop through the following json array:

{
  "id": "1",
  "msg": "hi",
  "tid": "2013-05-05 23:35",
  "fromWho": "[email protected]"
}, {
  "id": "2",
  "msg": "there",
  "tid": "2013-05-05 23:45",
  "fromWho": "[email protected]"
}

And have tried the following

for (var key in data) {
   if (data.hasOwnProperty(key)) {
      console.log(data[key].id);
   }
}

But for some reason I'm only getting the first part, id 1 values.

Any ideas?

Are there some missing brackets ? It doesn't really look like an array, now. And did you parse the JSON ? — Denys Séguret
– Denys Séguret, Commented Aug 14, 2013 at 17:19
is it an array of objects? (are you missing [] or they are not there?) — lpiepiora
– lpiepiora, Commented Aug 14, 2013 at 17:19
Please change the title, this is to iterate through a JSON object properties, not an array — Taylored Web Sites
– Taylored Web Sites, Commented Jan 24, 2019 at 15:21

Daniel L. VanDenBosch · Accepted Answer · 2022-06-02 20:32:26Z

309

Your JSON should look like this:

let json = [{
    "id" : "1", 
    "msg"   : "hi",
    "tid" : "2013-05-05 23:35",
    "fromWho": "[email protected]"
},
{
    "id" : "2", 
    "msg"   : "there",
    "tid" : "2013-05-05 23:45",
    "fromWho": "[email protected]"
}];

You can loop over the Array like this:

for(let i = 0; i < json.length; i++) {
    let obj = json[i];

    console.log(obj.id);
}

Or like this (suggested from Eric) be careful with IE support

json.forEach(function(obj) { console.log(obj.id); });

edited Jun 2, 2022 at 20:32

Daniel L. VanDenBosch

2,8257 gold badges46 silver badges68 bronze badges

answered Aug 14, 2013 at 17:21

Niklas

25.7k36 gold badges139 silver badges185 bronze badges

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

3 Comments

Eric Over a year ago

Or more concisely, json.forEach(function(obj) { console.log(obj.id); });

lpiepiora Over a year ago

Unless on IE8 (as usual, everyone but IE ;) )

mirapole Over a year ago

I think that example can be confuse, because var json is not a JSON object, but an array. In this case, .forEach works well, but when you use a json object, it doesn't work.

The Dark Knight · Accepted Answer · 2013-08-14 17:30:43Z

41

There's a few problems in your code, first your json must look like :

var json = [{
"id" : "1", 
"msg"   : "hi",
"tid" : "2013-05-05 23:35",
"fromWho": "[email protected]"
},
{
"id" : "2", 
"msg"   : "there",
"tid" : "2013-05-05 23:45",
"fromWho": "[email protected]"
}];

Next, you can iterate like this :

for (var key in json) {
if (json.hasOwnProperty(key)) {
  alert(json[key].id);
  alert(json[key].msg);
}
}

And it gives perfect result.

See the fiddle here : http://jsfiddle.net/zrSmp/

answered Aug 14, 2013 at 17:30

The Dark Knight

5,59913 gold badges59 silver badges105 bronze badges

Comments

chirag sorathiya · Accepted Answer · 2019-01-28 13:41:29Z

37

try this

var json = [{
    "id" : "1", 
    "msg"   : "hi",
    "tid" : "2013-05-05 23:35",
    "fromWho": "[email protected]"
},
{
    "id" : "2", 
    "msg"   : "there",
    "tid" : "2013-05-05 23:45",
    "fromWho": "[email protected]"
}];

json.forEach((item) => {
  console.log('ID: ' + item.id);
  console.log('MSG: ' + item.msg);
  console.log('TID: ' + item.tid);
  console.log('FROMWHO: ' + item.fromWho);
});

answered Jan 28, 2019 at 13:41

chirag sorathiya

1,25312 silver badges31 bronze badges

Comments

Sivanesh S · Accepted Answer · 2017-07-10 16:24:34Z

19

var arr = [
  {
  "id": "1",
  "msg": "hi",
  "tid": "2013-05-05 23:35",
  "fromWho": "[email protected]"
  }, {
  "id": "2",
  "msg": "there",
  "tid": "2013-05-05 23:45",
  "fromWho": "[email protected]"
  }
];

forEach method for easy implementation.

arr.forEach(function(item){
  console.log('ID: ' + item.id);
  console.log('MSG: ' + item.msg);
  console.log('TID: ' + item.tid);
  console.log('FROMWHO: ' + item.fromWho);
});

answered Jul 10, 2017 at 16:24

Sivanesh S

1,20511 silver badges16 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:03:05Z

13

Since i already started looking into it:

var data = [{
    "id": "1",
    "msg": "hi",
    "tid": "2013-05-05 23:35",
    "fromWho": "[email protected]"
}, {
    "id": "2",
    "msg": "there",
    "tid": "2013-05-05 23:45",
    "fromWho": "[email protected]"
}]

And this function

var iterateData =function(data){   for (var key in data) {
       if (data.hasOwnProperty(key)) {
          console.log(data[key].id);
       }
    }};

You can call it like this

iterateData(data); // write 1 and 2 to the console

Update after Erics comment

As eric pointed out a for in loop for an array can have unexpected results. The referenced question has a lengthy discussion about pros and cons.

Test with for(var i ...

But it seems that the follwing is quite save:

for(var i = 0; i < array.length; i += 1)

Although a test in chrome had the following result

var ar = [];
ar[0] = "a"; 
ar[1] = "b";
ar[4] = "c";

function forInArray(ar){ 
     for(var i = 0; i < ar.length; i += 1) 
        console.log(ar[i]);
}

// calling the function
// returns a,b, undefined, undefined, c, undefined
forInArray(ar);

Test with `.forEach()`

At least in chrome 30 this works as expected

var logAr = function(element, index, array) {
    console.log("a[" + index + "] = " + element);
}
ar.forEach(logAr); // returns a[0] = a, a[1] = b, a[4] = c

Links

see for in at the mdn
the new forEach method
a comment that states that array comprehension makes for in less bad
Array comprehension introduced with javascript 1.7 in firefox 2 (yes 2)

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Aug 14, 2013 at 17:24

surfmuggle

6,0408 gold badges58 silver badges96 bronze badges

2 Comments

Eric Over a year ago

-1 - for ... in loops should not be used for arrays

Eric Over a year ago

Array comprehensions use for each. for ... in ... is a language construct for enumerating object keys in an arbitrary order. That is not the right construct for an array.

Georg Plaz · Accepted Answer · 2019-01-28 13:00:55Z

10

It is working. I just added square brackets to JSON data. The data is:

var data = [
    { 
        "id": "1",
        "msg": "hi", 
        "tid": "2013-05-05 23:35", 
        "fromWho": "[email protected]" 
    }, 
    { 
        "id": "2", 
        "msg": "there", 
        "tid": "2013-05-05 23:45", 
        "fromWho": "[email protected]"
    }
]

And the loop is:

for (var key in data) {
   if (data.hasOwnProperty(key)) {
         alert(data[key].id);
   }
}

edited Jan 28, 2019 at 13:00

Georg Plaz

6,0185 gold badges43 silver badges66 bronze badges

answered Aug 14, 2013 at 17:29

Shyam Shinde

3091 gold badge5 silver badges15 bronze badges

Comments

Ivar · Accepted Answer · 2021-12-23 23:31:33Z

8

Your data snippet need to be expanded a little, and it has to be this way to be proper JSON. Notice I just include the array name attribute item.

{
  "item": [{
    "id": "1",
    "msg": "hi",
    "tid": "2013-05-05 23:35",
    "fromWho": "[email protected]"
  }, {
    "id": "2",
    "msg": "there",
    "tid": "2013-05-05 23:45",
    "fromWho": "[email protected]"
  }]
}

Your JavaScript is simply

var objCount = json.item.length;
for (var x = 0; x < objCount; x++) {
  var curitem = json.item[x];
}

edited Dec 23, 2021 at 23:31

Ivar

6,97912 gold badges58 silver badges69 bronze badges

answered Apr 26, 2020 at 18:50

Robb Penoyer

811 silver badge1 bronze badge

1 Comment

Jackie Johnston Over a year ago

FYI, there's a typo I think. The xx++ should be x++

lpiepiora · Accepted Answer · 2013-08-14 17:25:39Z

7

It must be an array if you want to iterate over it. You're very likely missing [ and ].

var x = [{
    "id": "1",
        "msg": "hi",
        "tid": "2013-05-05 23:35",
        "fromWho": "[email protected]"
}, {
    "id": "2",
        "msg": "there",
        "tid": "2013-05-05 23:45",
        "fromWho": "[email protected]"
}];

var $output = $('#output');
for(var i = 0; i < x.length; i++) {
    console.log(x[i].id);
}

Check out this jsfiddle: http://jsfiddle.net/lpiepiora/kN7yZ/

answered Aug 14, 2013 at 17:25

lpiepiora

13.8k1 gold badge39 silver badges48 bronze badges

Comments

Kami Yang · Accepted Answer · 2015-11-12 15:55:42Z

6

A bit late but i hope i may help others :D

your json needs to look like something Niklas already said. And then here you go:

for(var key in currentObject){
        if(currentObject.hasOwnProperty(key)) {
          console.info(key + ': ' + currentObject[key]);
        }
   }

if you have an Multidimensional array, this is your code:

for (var i = 0; i < multiDimensionalArray.length; i++) {
    var currentObject = multiDimensionalArray[i]
    for(var key in currentObject){
            if(currentObject.hasOwnProperty(key)) {
              console.info(key + ': ' + currentObject[key]);
            }
       }
}

edited Nov 12, 2015 at 15:55

answered Feb 13, 2015 at 11:02

Kami Yang

4275 silver badges15 bronze badges

Comments

Katana314 · Accepted Answer · 2013-08-14 17:21:15Z

5

Well, all I can see there is that you have two JSON objects, seperated by a comma. If both of them were inside an array ([...]) it would make more sense.

And, if they ARE inside of an array, then you would just be using the standard "for var i = 0..." type of loop. As it is, I think it's going to try to retrieve the "id" property of the string "1", then "id" of "hi", and so on.

answered Aug 14, 2013 at 17:21

Katana314

8,6052 gold badges31 silver badges36 bronze badges

Comments

Bhavesh Prajapati · Accepted Answer · 2021-06-18 10:49:06Z

5

the very easy way!

var tire_price_data = JSON.parse('[{"qty":"250.0000","price":"0.390000"},{"qty":"500.0000","price":"0.340000"},{"qty":"1000.0000","price":"0.290000"}]'); 
tire_price_data.forEach(function(obj){
    console.log(obj);
    console.log(obj.qty);
    console.log(obj.price);
})

Thank you.

answered Jun 18, 2021 at 10:49

Bhavesh Prajapati

1712 silver badges7 bronze badges

Comments

Lime莉茉 · Accepted Answer · 2021-08-26 14:32:57Z

3

var json = {
    "persons": [
        {"name": "Lili", "age": 23, "is_student": true},
        {"name": "James", "age": 24, "is_student": true},
        {"name": "John", "age": 25, "is_student": false}
    ]
};

for (var key in json.persons) {
    for (var keyName in json.persons[key]) {
        alert(keyName + ': ' + (json.persons[key])[keyName]);
    }
}

//Output: name:Lili, age:23, is_student:true, ...

edited Aug 26, 2021 at 14:32

answered Aug 26, 2021 at 11:31

Lime莉茉

1011 silver badge3 bronze badges

Comments

user2314737 · Accepted Answer · 2017-04-21 18:12:17Z

A short solution using map and an arrow function

var data = [{
  "id": "1",
  "msg": "hi",
  "tid": "2013-05-05 23:35",
  "fromWho": "[email protected]"
}, {
  "id": "2",
  "msg": "there",
  "tid": "2013-05-05 23:45",
  "fromWho": "[email protected]"
}];
data.map((item, i) => console.log('Index:', i, 'Id:', item.id));

And to cover the cases when the property "id" is not present use filter:

var data = [{
  "id": "1",
  "msg": "hi",
  "tid": "2013-05-05 23:35",
  "fromWho": "[email protected]"
}, {
  "id": "2",
  "msg": "there",
  "tid": "2013-05-05 23:45",
  "fromWho": "[email protected]"
}, {
  "msg": "abcde",
  "tid": "2013-06-06 23:46",
  "fromWho": "[email protected]"
}];

data.filter(item=>item.hasOwnProperty('id'))
                .map((item, i) => console.log('Index:', i, 'Id:', item.id));

ebadfd · Accepted Answer · 2021-12-23 10:39:55Z

0

you can use a for-loop then to get the values you can De-structure them

const arr = [
        {
            id:123,
            desc:"do something",
            isDone:false
        },
        {
            id:124,
            desc:"do something",
            isDone:true
        }
    ]

for(let _i in arr){
    let {id, desc, isDone} = arr[_i]
    // do something
    console.log({id, desc, isDone});
}

answered Dec 23, 2021 at 10:39

ebadfd

4196 silver badges10 bronze badges

Collectives™ on Stack Overflow

JavaScript loop through JSON array?

14 Answers 14

3 Comments

Comments

Comments

Comments

Update after Erics comment

Test with for(var i ...

Test with `.forEach()`

Links

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

3 Comments

Comments

Comments

Comments

Update after Erics comment

Test with for(var i ...

Test with .forEach()

Links

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Test with `.forEach()`