獲得從嵌套數組（JSON）值

Question

我試着從陣列中獲取價值：

[ 
    { 
    "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>'); 
     }); 
    } 
    }); 
}); 

我可以毫無問題地閱讀所有的，無論是「top_works，因爲我需要具體數目[X]，我需要一個循環。

在某些情況下，如果top_works爲空，我得到一個「控制檯未定義」，我需要表現出的白色空間，如果該元素一點兒也不exsist。

有人能幫助我？

Answer 1

您應該驗證是否存在，是這樣的：

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

Answer 2

，您可以利用array.length財產的檢查和元素EXI sts或不如以下示例中所示。

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"); 
 
}