非常基本的JSON問題

Question

我有這樣的JSON數據：

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

我如何通過內部的人並輸出其名稱中的所有對象與他們的年齡一起，像這樣的循環：

John 25 
Jame 49 
followed by the rest... 

Answer 1

使用for循環：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 />'); 
} 

或jQuery中的each功能：http://api.jquery.com/jQuery.each/

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

Answer 2

不知道你想怎麼寫的頁面，但這裏有document.write樣本：

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

我極力推薦的長度在for循環的第一表現，而不是第二。在這種情況下，people.length不是太貴。但是如果它的代價是，並且你把它放在第二個表達式中，如for (var i = 0; i < people.length; i++)，那麼它將在的每個循環中得到評估，並且你想知道你的CPU週期在哪裏。 :)

Answer 3

使用jQuery你可以做

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

如果你想只是把它添加到一個DIV，你可以通過他們做

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

Answer 4

循環。這是Javascript對象字面不是JSON雖然只是FYI

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

例如：

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  

所以JSON在JavaScript中唯一真正存在的表現。

Answer 5

我會使用forEach：

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

Answer 6

下面是一個例子使用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(" ")) ; 
}); 

輸出：

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

Answer 7

在這裏你去

工作demo

標記

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