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

<input type="checkbox" ng-checked="field.checked">{{field.name}}

您的JSON包含：

“count”：87，
“next”：“http://swapi.co/api/people/?format=json&page=2”，
“previous”：null，
“results”：您想要的数据

所以你必须得到结果并迭代它。

Answer 2

您需要像这样迭代results data对象：

$.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);
    });
});

Answer 3

我认为你应该有类似的东西：

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

与if条件

完全一样

Answer 4

将$.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 5

试试这个

var a = //your json;

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

如何使用$ .each JQuery循环遍历JSON对象？

5 个答案: