从嵌套数组中获取值(json)

时间:2017-03-16 14:27:29

标签: javascript jquery json ajax

我试图从数组中获取值:

[
  {
    "id": "5899aaa321e01b8b050041cb",
    "name": "John Doe",
    "picture": {"small": "https://cdn.image.com/1234"},
    "age": 28,
    "location": {"city": "London"},
    "following": 1,
    "resources": {"band": "http://image/music"},
    "top_works": [
      {
        "points": 20,
        "portfolio": {
        "facebook_id": "1e691681472",
        "picture": {"small": "https://cdn.image.com/1234"}
        }
      },
      {
        "points": 10,
        "portfolio": {
        "facebook_id": "1e6916r17ry",
        "picture": {"small": "https://cdn.image.com/1234"}
        }
      }
    ]
  }
]

$(document).ready(function() {
  $.ajax({
    type: 'GET',
    url: '/api/url/123',
    data: { get_param: 'value' },
    dataType: 'json',
    success: function (data) {
      $.each(data, function (index, element) {
        $('#api').append('<div>'
        + ' <div><h3>' + element.name + '</h3></div>'
        + '<div>' + element.top_works[2].portfolio.picture.small + '></div>');
      });
    }
  });
});

我可以毫无问题地阅读所有内容,而不是&#34; top_works,因为我需要特定数字[x],我需要一个循环。

在某些情况下,如果top_works为空,我在控制台&#34;中得到一个&#34;未定义,如果元素确实存在,我需要显示一个空格。

有人可以帮助我吗?

2 个答案:

答案 0 :(得分:0)

您应该验证是否存在,例如:

$.each(data, function (index, element) {
    var HTML = '<div>'
    + ' <div><h3>' + element.name + '</h3></div>';
    var exists = element.top_works[2] && element.top_works[2].portfolio && element.top_works[2].portfolio.picture && element.top_works[2].portfolio.picture.small;
    HTML+= exists ? '<div>' + element.top_works[2].portfolio.picture.small + '</div>' : '<div>#empty space</div>';
    $('#api').append(HTML + '</div>');
});

但是如果你想在最后一个索引上搜索一张图片,也许你可以这样做:

$.each(data, function (index, element) {
    var HTML = '<div>'
    + ' <div><h3>' + element.name + '</h3></div>';
    var last = element.top_works ? element.top_works.length-1 : -1;
    var exists = last >= 0;
    HTML+= exists ? '<div>' + element.top_works[last].portfolio.picture.small + '</div>' : '<div>#empty space</div>';
    $('#api').append(HTML + '</div>');
});

修改

对于循环,您可以这样做:

$.each(data, function (index, element) {
    var HTML = '<div>'
    + ' <div><h3>' + element.name + '</h3></div>';
    if(element.top_works && element.top_works.length > 0) {
        for(var i in element.top_works) {
            HTML+= '<div>' + element.top_works[i].portfolio.picture.small + '</div>';
        }
    } else {
        HTML += '<div>#empty space</div>';
    }
    $('#api').append(HTML + '</div>');
});

答案 1 :(得分:0)

您可以使用var topWorks = { "top_works": [ { "points": 20, "portfolio": { "facebook_id": "1e691681472", "picture": { "small": "https://cdn.image.com/1234", } } }, { "points": 10, "portfolio": { "facebook_id": "1e6916r17ry", "picture": { "small": "https://cdn.image.com/1234", } } }, ] } if(topWorks.top_works.length > 0) { console.log("Top works has element at index 0"); } if(topWorks.top_works.length > 1) { console.log("Top works has element at index 1"); } if(topWorks.top_works.length > 2) { console.log("Top works has element at index 2"); }else { console.log("Top works does not have element at index 2"); }属性来检查是否存在元素,如下例所示。

&#13;
&#13;
human_time_format_combined
&#13;
&#13;
&#13;