如何使用$ .each JQuery遍歷JSON對象？

Question

我想使用來自star wars api的JSON數據進行實時搜索。 JSON包含一些objects，我想獲取的objects是results，這是一個array，其中包含objects，它們具有屬性name,height,mass等。

的JSON像這樣的片段：

{ 
    "count": 87, 
    "next": "http://swapi.co/api/people/?format=json&page=2", 
    "previous": null, 
    "results": [ 
    { 
    "name": "Luke Skywalker", 
    "height": "172", 
    "mass": "77", 
    "hair_color": "blond", 
    "skin_color": "fair", 
    "eye_color": "blue", 
    "birth_year": "19BBY", 
    "gender": "male", 
    "homeworld": "http://swapi.co/api/planets/1/", 
    "films": [ 
    "http://swapi.co/api/films/6/", 
    "http://swapi.co/api/films/3/", 
    "http://swapi.co/api/films/2/", 
    "http://swapi.co/api/films/1/", 
    "http://swapi.co/api/films/7/" 
    ], 
    "species": [ 
    "http://swapi.co/api/species/1/" 
    ], 
    "vehicles": [ 
    "http://swapi.co/api/vehicles/14/", 
    "http://swapi.co/api/vehicles/30/" 
    ], 
    "starships": [ 
    "http://swapi.co/api/starships/12/", 
    "http://swapi.co/api/starships/22/" 
    ], 
    "created": "2014-12-09T13:50:51.644000Z", 
    "edited": "2014-12-20T21:17:56.891000Z", 
    "url": "http://swapi.co/api/people/1/" 
    } 
] 
} 

我試着用這個代碼，但在控制檯說：Uncaught TypeError: Cannot read property 'name' of undefined（第7行）

$('#search').keyup(function() { 
    var searchField = $('#search').val(); 
    var myExp = new RegExp(searchField, "i"); 
    $.getJSON('http://swapi.co/api/people/?format=json', function(data) { 
     var output = '<ul class="searchresults">'; 
     $.each(data, function(key, val) { 
      if ((val.results.name.search(myExp) != -1) || 
      (val.results.height.search(myExp) != -1)) { 
       output += '<li>'; 
       output += '<h2>'+ val.name +'</h2>'; 
       output += '<p>'+ val.height +'</p>'; 
       output += '</li>'; 
      } 
     }); 
     output += '</ul>'; 
     $('#update').html(output); 
    }); 
}); 

我知道有什麼毛病我的循環，我試圖尋找答案，但我無法得到正確的答案。你能幫我麼？

Answer 1

這是一個簡單的錯誤，你應該遍歷data.results

$.getJSON('http://swapi.co/api/people/?format=json', function(data) { 
    $.each(data.results, function(key, val) { 
    console.log(val.name); 
    }) 
}); 

您的JSON包含：

你想

所以你必須數據：

「算」：87，

「下一步」： 「http://swapi.co/api/people/?format=json&page=2」

「以前」：空，

「結果」得到結果並重復它。

Answer 2

我想你應該有這樣的：

output += '<h2>'+ val.results.name +'</h2>'; 
output += '<p>'+ val.results.height +'</p>'; 

完全一樣，你有你的if條件

Answer 3

讓你的$.each循環如下：因爲val.results是json的數組格式。

$.each(data, function(key, val) { 
     var results = val.results; 
     $.each(results,function(index,value){ 
      if ((value[index].name.search(myExp) != -1) || 
      (value[index].height.search(myExp) != -1)) { 
       output += '<li>'; 
       output += '<h2>'+ value[index].name +'</h2>'; 
       output += '<p>'+ value[index].height +'</p>'; 
       output += '</li>'; 
      } 
     }); 

     }); 

希望它能正常工作。

或者乾脆

 $.each(data.results,function(index,value){ 
      if ((value[index].name.search(myExp) != -1) || 
      (value[index].height.search(myExp) != -1)) { 
       output += '<li>'; 
       output += '<h2>'+ value[index].name +'</h2>'; 
       output += '<p>'+ value[index].height +'</p>'; 
       output += '</li>'; 
      } 
     }); 

可能足以爲您服務。

Answer 4

試試這個

var a = //your json; 

$.each(a,function(i,val){ 
if(val.results.length != 0){ 
$.each(val.results,function(k,value){ 
console.log(value.name)}) 
} 
}) 

Answer 5

您需要遍歷data對象這樣的results：

$.getJSON('http://swapi.co/api/people/?format=json', function(data) { 
    $.each(data.results, function(key, value){ 
    console.log("key", key); 
    console.log("value", value.name) 
    }) 
}) 

或者你的情況：

$('#search').keyup(function() { 
    var searchField = $('#search').val(); 
    var myExp = new RegExp(searchField, "i"); 
    $.getJSON('http://swapi.co/api/people/?format=json', function(data) { 
     var output = '<ul class="searchresults">'; 
     $.each(data.results, function(key, val) { //Only this line changes. 
      if ((val.results.name.search(myExp) != -1) || 
      (val.results.height.search(myExp) != -1)) { 
       output += '<li>'; 
       output += '<h2>'+ val.name +'</h2>'; 
       output += '<p>'+ val.height +'</p>'; 
       output += '</li>'; 
      } 
     }); 
     output += '</ul>'; 
     $('#update').html(output); 
    }); 
});