I have an array of JSON objects like so:

[
    { name: "tom", text: "tasty" },
    { name: "tom", text: "tasty" },
    { name: "tom", text: "tasty" },
    { name: "tom", text: "tasty" },
    { name: "tom", text: "tasty" }
]

I want to loop through them and echo them out in a list. How can I do it?

I have an array of JSON objects like so:

[
    { name: "tom", text: "tasty" },
    { name: "tom", text: "tasty" },
    { name: "tom", text: "tasty" },
    { name: "tom", text: "tasty" },
    { name: "tom", text: "tasty" }
]

I want to loop through them and echo them out in a list. How can I do it?

• javascript
• arrays
• json
• loops

Share Improve this question Follow edited Dec 12, 2015 at 14:30 Zanon 30.8k2121 gold badges118118 silver badges126126 bronze badges asked Jan 1, 2010 at 10:40 tarnfeldtarnfeld 26.6k4444 gold badges112112 silver badges147147 bronze badges 1

• just to add, theres nothing special about json. its just a javascript object initialization graph.. in your example you have an array (the square brackets), with objects in it (the curly bracket syntax).. you should check out object and array literals in javascript to reveal the 'magic' – meandmycode Commented Jan 1, 2010 at 11:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You mean something like this?

 var a = [
     { name: "tom", text: "tasty" },
     { name: "tom", text: "tasty" },
     { name: "tom", text: "tasty" },
     { name: "tom", text: "tasty" },
     { name: "tom", text: "tasty" }
 ];

 function iter() {
     for(var i = 0; i < a.length; ++i) {
         var json = a[i];
         for(var prop in json) {
              alert(json[prop]);
                          // or myArray.push(json[prop]) or whatever you want
         }
     }
 }

var json = [
    { name: "tom", text: "tasty" },
    { name: "tom", text: "tasty" },
    { name: "tom", text: "tasty" },
    { name: "tom", text: "tasty" },
    { name: "tom", text: "tasty" }
]

for(var i in json){
    var json2 = json[i];
    for(var j in json2){
        console.log(i+'-'+j+" : "+json2[j]);
    }
}

Another solution:

var jsonArray = [
  { name: "Alice", text: "a" },
  { name: "Bob",   text: "b" },
  { name: "Carol", text: "c" },
  { name: "Dave",  text: "d" }
];

jsonArray.forEach(function(json){
  for(var key in json){
    var log = "Key: {0} - Value: {1}";
    log = log.replace("{0}", key); // key
    log = log.replace("{1}", json[key]); // value
    console.log(log);
  }
});

If you want to target newer browsers, you can use Objects.keys:

var jsonArray = [
  { name: "Alice", text: "a" },
  { name: "Bob",   text: "b" },
  { name: "Carol", text: "c" },
  { name: "Dave",  text: "d" }
];

jsonArray.forEach(function(json){
  Object.keys(json).forEach(function(key){
    var log = "Key: {0} - Value: {1}";
    log = log.replace("{0}", key); // key
    log = log.replace("{1}", json[key]); // value
    console.log(log);
  });
});