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 am 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, Aug 14 '13 at 17:19
is it an array of objects? (are you missing [] or they are not there?) — lpiepiora, Aug 14 '13 at 17:19
Please change the title, this is to iterate through a JSON object properties, not an array — Taylored Web Sites, Jan 24 at 15:21

Niklas · Accepted Answer · 2013-08-14 17:27:01Z

185

Your JSON should look like 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]"
}];

You can loop over the Array like this:

for(var i = 0; i < json.length; i++) {
    var 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 Aug 14 '13 at 17:27

answered Aug 14 '13 at 17:21

Niklas

13.1k23 gold badges103 silver badges145 bronze badges

9

Or more concisely, json.forEach(function(obj) { console.log(obj.id); }); – Eric Aug 14 '13 at 17:26
3

Unless on IE8 (as usual, everyone but IE ;) ) – lpiepiora Aug 14 '13 at 17:29
Your code helped me a lot. Thank you! – mchinta Apr 26 '18 at 5:57
1

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. – mpoletto May 4 '18 at 15:30

add a comment |

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

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/

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

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

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

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)

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. — Eric, Aug 14 '13 at 20:18

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

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/

Lonely Neuron · Accepted Answer · 2019-01-28 13:00:55Z

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

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

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

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

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.

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

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

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

current community

your communities

more stack exchange communities

JavaScript loop through json array?

10 Answers 10

Update after Erics comment

Test with for(var i ...

Test with `.forEach()`

Links

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript json or ask your own question.

Linked

Hot Network Questions

10 Answers 10

Update after Erics comment

Test with for(var i ...

Test with .forEach()

Links

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript json or ask your own question.

Linked

Related

Test with `.forEach()`