Question

我有一个JSON有以下数据：

        {
       "results":[
          {
             "name":"Sydney Showboats",
             "photos":[
                {
                   "photo_reference":"Pic062"
                }
             ]
          },
          {
             "name":"Blue Line Cruises"
          },
          {
             "name":"Rhythmboat Cruises",
             "photos":[
                {
                   "photo_reference":"Pic678"
                }
             ]
          },
          {
             "name":"Flying Fish Restaurant & Bar",
             "photos":[
                {
                   "photo_reference":"Pic345"
                }
             ]
          }
       ],
       "status":"OK"
    }

我试图遍历此JSON以显示.name div中的每个名称值以及.photo div中的每个图像：

$.getJSON(jsonPlacesUrl, function(data) {
  $.each(data.results, function(index){
    $('.name').html('<p>' + data.results[index].name + '</p>');
    $('.photo').html('<img src="' + data.results[index].photos[0].photo_reference + '.jpg">');
  })
});

它可以正常使用名称值，并且可以与第一个图像一起使用。但是，因为没有＆＃34;照片＆＃34;在第二个对象中的属性，脚本因

而停止

未捕获的TypeError：无法读取属性＆＃39; 0＆＃39;未定义的。

那么有没有办法：删除没有嵌套在里面的照片对象的对象？使用更复杂的循环来迭代JSON并存储每个可用的图像？任何可能的解决方案，允许我动态显示每个图像？

如果有人能够启发我，我将非常感激！

Answer 1

您希望确保迭代中的当前对象包含该属性。检查对象是否包含属性的一种方法是使用in运算符。

$.getJSON(jsonPlacesUrl, function(data) {
  $.each(data.results, function(index){
    if ('photos' in data.results[index] && 'name' in data.results[index]){
      $('.name').html('<p>' + data.results[index].name + '</p>');
      $('.photo').html('<img src="' + 
      data.results[index].photos[0].photo_reference + '.jpg">');
    }
 })

}）;

Documentation for in operator

Answer 2

任何时候你有＆＃34; Uncaught TypeError：无法读取属性＆＃39; prop-name＆＃39;未定义＆＃34; 您需要针对guard添加undefined：

$.getJSON(jsonPlacesUrl, function(data) {
  $.each(data.results, function(index){
    if (typeof data.results[index].photos !== "undefined" && typeof data.results[index].name !== "undefined") { // <- Here
      $('.name').html('<p>' + data.results[index].name + '</p>');
      $('.photo').html('<img src="' + data.results[index].photos[0].photo_reference + '.jpg">');
    }
  })
});

如果您需要确保定义祖先，可以将其链接起来，如：

if (typeof a !== "undefined" && typeof a.b !== "undefined" && typeof a.b.c !== "undefined")

等等。

另请注意Pablo的答案为in更简洁。

或者，您可以 filter您的列表：

＆＃13;

const json_parsed = {
  "results": [{
      "name": "Sydney Showboats",
      "photos": [{
        "photo_reference": "Pic062"
      }]
    },
    {
      "name": "Blue Line Cruises"
    },
    {
      "name": "Rhythmboat Cruises",
      "photos": [{
        "photo_reference": "Pic678"
      }]
    },
    {
      "name": "Flying Fish Restaurant & Bar",
      "photos": [{
        "photo_reference": "Pic345"
      }]
    }
  ],
  "status": "OK"
}

clean_list = json_parsed['results'].filter(item => typeof item.photos !== "undefined" && typeof item.name !== "undefined");

console.dir(clean_list);

＆＃13;

即使密钥丢失，也会迭代JSON对象

2 个答案: