[英]How to loop through JSON object with $.each JQuery?
I want to make a live search with JSON data from star wars api . 我想使用Star Wars api的 JSON数据进行实时搜索。 The JSON contain of some objects
, and the objects
I wanted to fetch is results
, which is an array
that contains objects
that have propertie name
, height
, mass
, ect. JSON包含一些objects
,而我想获取的objects
是results
,它是一个包含objects
的array
,这些objects
具有属性name
, height
, mass
和ect。
The snippet of the JSON like this: 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/"
}
]
}
I tried with this code but the console says Uncaught TypeError: Cannot read property 'name' of undefined
(on line 7) 我尝试使用此代码,但控制台显示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);
});
});
I know there's something wrong with my loop, I tried looking for the the answer but I can't get the right answer. 我知道我的循环有问题,我尝试寻找答案,但是我找不到正确的答案。 Can you please help me? 你能帮我么?
It's a simple mistake, you should iterate over data.results 这是一个简单的错误,您应该遍历数据。
$.getJSON('http://swapi.co/api/people/?format=json', function(data) {
$.each(data.results, function(key, val) {
console.log(val.name);
})
});
Your JSON contains : 您的JSON包含:
So you must get results and iterate over it. 因此,您必须获得结果并对其进行迭代。
You need to iterate over the results
of the data
object like this: 您需要像这样遍历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)
})
})
Or in your case: 或您的情况:
$('#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);
});
});
I think you should have something like: 我认为您应该有这样的东西:
output += '<h2>'+ val.results.name +'</h2>';
output += '<p>'+ val.results.height +'</p>';
exactly as you have in your if
condition 与您的if
条件完全一样
Make your $.each
loop as below:Because val.results
is in array format of json. 使您的$.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>';
}
});
});
Hope it will works correctly. 希望它能正常工作。
OR simply 或者简单地
$.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>';
}
});
May be enough for you. 可能对您来说就足够了。
try this 尝试这个
var a = //your json;
$.each(a,function(i,val){
if(val.results.length != 0){
$.each(val.results,function(k,value){
console.log(value.name)})
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.