非常基本的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; 
}