CODEWITHSUNDEEP
javascriptjqueryjson
Jake
Jake

Reputation: 11

Very basic JSON question

I have this JSON data:

var people = [
     { name : "John",  age : 25 },
     { name : "Jane",  age : 49 },
     { name : "Jim",   age : 31 },
     { name : "Julie", age : 39 },
     { name : "Joe",   age : 19 },
     { name : "Jack",  age : 48 }
];

How can I loop through all the objects inside people and output their names along with their ages like so:

John 25
Jame 49
followed by the rest...

Upvotes: 0

Views: 169

Answers (7)

RoccoC5
RoccoC5

Reputation: 4213

Use a for loop: http://www.w3schools.com/js/js_loop_for.asp

for (var i = 0; i < people.length; i++)
{
     document.write(people[i].name + ' ' + people[i].age + '<br />'); 
}

or the each function in jQuery: http://api.jquery.com/jQuery.each/

$.each(people, function(i, o) {
   document.write(o.name + ' ' + o.age + '<br />'); 
});

Upvotes: 4

ShankarSangoli
ShankarSangoli

Reputation: 69905

Here you go

Working demo

Markup

<div id="people"></div>

JS

var people = [
     { name : "John",  age : 25 },
     { name : "Jane",  age : 49 },
     { name : "Jim",   age : 31 },
     { name : "Julie", age : 39 },
     { name : "Joe",   age : 19 },
     { name : "Jack",  age : 48 }
];

$(function(){
    var $people = $("#people");
    $.each(people, function(){
       $people.append("<div>").append("<span>"+this.name+"</span>"+this.age+"<br />");
    });
});

Css

#people
{
    width:70px;
    text-align:right;
}

#people span
{
    float:left;
}

Upvotes: 0

Joe
Joe

Reputation: 82594

Loop through them. These are Javascript object literals not JSON though, just FYI

for(var i = 0; i < people.length; i++) {
    alert(people[i].name + " " + people[i].age)
}

For example:

var variable = { 'key': 'value' };  // object
console.log(variable.key); // outputs: value

var json = '{"key":"value"}'; // javascript string representing valid json
console.log(json.key); // outputs: undefined

var jObj = JSON.parse(json); // now a javascript object from the json string
console.log(jObj.key); // outputs: value

So JSON only really exists in javascript as a representation.

Upvotes: 1

pixelfreak
pixelfreak

Reputation: 17834

Not sure how you want to write it to the page, but here's a sample with document.write:

for (var i = 0, ilen = people.length; i < ilen; i++)
{
   document.write(people[i].name + ' ' + people[i].age + '<br/>');
}

I highly recommend getting the length in the first expression of for-loop, not the second. In this case, people.length is not too expensive. But if it is costly and you put it in the second expression like so for (var i = 0; i < people.length; i++), then it'll get evaluated in every loop and you wonder where your CPU cycles went. :)

Upvotes: 3

Jake Dempsey
Jake Dempsey

Reputation: 6312

Here is an example using jquery:

var people = [
     { name : "John",  age : 25 },
     { name : "Jane",  age : 49 },
     { name : "Jim",   age : 31 },
     { name : "Julie", age : 39 },
     { name : "Joe",   age : 19 },
     { name : "Jack",  age : 48 }
];

jQuery.each(people, function(index, person){
console.log([person.name, person.age].join(" ")) ;
});

Output:

John 25
Jane 49
Jim 31
Julie 39
Joe 19
Jack 48

Upvotes: 0

Zach Kelling
Zach Kelling

Reputation: 53819

I'd use forEach:

people.forEach(function(person) {
    console.log(person.name, person.age)
});

Upvotes: 0

Amir Raminfar
Amir Raminfar

Reputation: 34149

With jquery you can do

$.each(people, function(){
  alert(this.name + " " + this.age);
});

If you want to just append it to a div you can do

$.map(people, function(){
  return this.name + " " + this.age + "<br/>";
}).appendTo("#myDiv");

Upvotes: 2

Related Questions