【问题标题】:TypeError: Cannot read property '0' of undefined while accessing "photo_reference" propertyTypeError:访问“photo_reference”属性时无法读取未定义的属性“0”
【发布时间】:2017-12-24 07:51:17
【问题描述】:

以下是我从 google 地方 API 获得的 JSON。使用 JSON.parse(body) 解析 Json。 “结果”键是我循环访问照片属性的对象数组。希望代码现在更清晰。我已经粘贴了从 api 调用中获得的有效 JSON。

{
   "html_attributions" : [],
   "next_page_token" : "CqQCGwEAAI5PpCTJI6Qoa1CD9iA4EpJha6t0gMlZ3I3DpOIVgE1BUYh5NNI0lXRuvAltI8RhOilTNJggXsR3TEP2C6hoIsibEWZXnZClbEcZzes7LGqJuQ0heJWipe7RNbxq8S8zuao1HWfECs11i44WO0Luv-4bYx5GlCEj6Wl07LitkzwG4u0e4FyIHogyaShky5Awd44ZyOcqKzy7wYBr7p37j6A6PMdR7zn7cMWQKiVolfHQbFZerVJ3JJ5MiKSshocG189wPKjqJzSACE6W19LmZ7TIMB9qm7jQANNQStrsq7rYAWIBQ-UqJ_6Hv9jv1xL7eRQ9bkyR17u7xPZWfeCU69u_PQmGvuvSWNJDvNUuoI-uwLc_RhgTZp26kyzMlXwYHRIQXy13ridwzgvlBU8ez_y-WBoUcBN7UvN8Q8iuDyS_LjXEWmT_sIk",
   "results" : [
      {
         "geometry" : {
            "location" : {
               "lat" : 28.615572,
               "lng" : 77.3468
            },
            "viewport" : {
               "northeast" : {
                  "lat" : 28.6169209802915,
                  "lng" : 77.34814898029151
               },
               "southwest" : {
                  "lat" : 28.6142230197085,
                  "lng" : 77.34545101970849
               }
            }
         },
         "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
         "id" : "dea8496f678dc1f01381a85298e37a0905a3ca11",
         "name" : "Malabar Junction Restaurant",
         "opening_hours" : {
            "open_now" : true,
            "weekday_text" : []
         },
         "photos" : [
            {
               "height" : 746,
               "html_attributions" : [
                  "\u003ca href=\"https://maps.google.com/maps/contrib/117230637789134827076/photos\"\u003eSwati\u003c/a\u003e"
               ],
               "photo_reference" : "CmRaAAAArbpjr1fjNp2Fc4ww8Vkgrzzzt5aHEvACzEZFa-XCJU3Fw2JqFLSDo64jlFWwDZwdYaFP_cIgdqI37TJ25mVB2W_rtoTv_aI0LJGgnh_P4-UF7u45ZvqdM-bE4ljYD2yyEhDjv-4AWC5AKcE713GL1qAsGhQjAN2oS1KWv52f8XsjEK3Pmnv53w",
               "width" : 750
            }
         ],
         "place_id" : "ChIJx6qqqj3lDDkRcBw22oTfWgk",
         "reference" : "CmRRAAAAZBpNfAiO2G_y57bLoFTSM28MG4xUi-VAg3kJgV2ZzksdhpzySwxdPNdPP1paEIE46i70oxgLHliUcEjxalukNEyhN85J-ryRbXVVMkg4Tz-MGBGhgVur7SV5b4IFePnfEhABXu9pHswL4Up5w-k9td94GhSDs13DRQVxPOpI8iWqUbLyd_WJUg",
         "scope" : "GOOGLE",
         "types" : [ "restaurant", "food", "point_of_interest", "establishment" ],
         "vicinity" : "62, 8, Rani Jhansi Marg, Block 10, Sector 10, Noida"
      }
   ],
   "status" : "OK"
}

尝试像这样访问 photo_reference 属性

let resultJSON = JSON.parse(body);
let results = resultJSON["results"];
for (var i = 0; i < results.length; i++) { 
   let name = results[i]["name"];
   console.log(results[i].photos[0].photo_reference);
}

【问题讨论】:

  • 试试console.log(results[i]["photos"][0].photo_reference)。原因是 photo_reference 是一个字段(不是数组索引或映射键),而 results[i]["photos"][0] 是一个对象,这就是您需要 . 运算符的原因
  • 感谢您的回复。试过,但它崩溃了同样的错误。 TypeError:无法读取未定义的属性“0”。尝试访问照片的第一个元素时崩溃
  • 这显然不是真正的 JSON。一方面,它没有按原样解析。此外,没有results
  • @GeorgeJempty 是对的,您确实应该更新问题以包含有效的 JSON。
  • results 是一个对象数组。我只是循环通过它。 console.log(results[i].photos[0].photo_reference) 也因同样的错误而崩溃

标签: javascript arrays json


【解决方案1】:

这是一个 sn-p,显示您的更新代码正在运行。

let resultJSON = {
  "html_attributions": [],
  "next_page_token": "CqQCGwEAAI5PpCTJI6Qoa1CD9iA4EpJha6t0gMlZ3I3DpOIVgE1BUYh5NNI0lXRuvAltI8RhOilTNJggXsR3TEP2C6hoIsibEWZXnZClbEcZzes7LGqJuQ0heJWipe7RNbxq8S8zuao1HWfECs11i44WO0Luv-4bYx5GlCEj6Wl07LitkzwG4u0e4FyIHogyaShky5Awd44ZyOcqKzy7wYBr7p37j6A6PMdR7zn7cMWQKiVolfHQbFZerVJ3JJ5MiKSshocG189wPKjqJzSACE6W19LmZ7TIMB9qm7jQANNQStrsq7rYAWIBQ-UqJ_6Hv9jv1xL7eRQ9bkyR17u7xPZWfeCU69u_PQmGvuvSWNJDvNUuoI-uwLc_RhgTZp26kyzMlXwYHRIQXy13ridwzgvlBU8ez_y-WBoUcBN7UvN8Q8iuDyS_LjXEWmT_sIk",
  "results": [{
    "geometry": {
      "location": {
        "lat": 28.615572,
        "lng": 77.3468
      },
      "viewport": {
        "northeast": {
          "lat": 28.6169209802915,
          "lng": 77.34814898029151
        },
        "southwest": {
          "lat": 28.6142230197085,
          "lng": 77.34545101970849
        }
      }
    },
    "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
    "id": "dea8496f678dc1f01381a85298e37a0905a3ca11",
    "name": "Malabar Junction Restaurant",
    "opening_hours": {
      "open_now": true,
      "weekday_text": []
    },
    "photos": [{
      "height": 746,
      "html_attributions": [
        "\u003ca href=\"https://maps.google.com/maps/contrib/117230637789134827076/photos\"\u003eSwati\u003c/a\u003e"
      ],
      "photo_reference": "CmRaAAAArbpjr1fjNp2Fc4ww8Vkgrzzzt5aHEvACzEZFa-XCJU3Fw2JqFLSDo64jlFWwDZwdYaFP_cIgdqI37TJ25mVB2W_rtoTv_aI0LJGgnh_P4-UF7u45ZvqdM-bE4ljYD2yyEhDjv-4AWC5AKcE713GL1qAsGhQjAN2oS1KWv52f8XsjEK3Pmnv53w",
      "width": 750
    }],
    "place_id": "ChIJx6qqqj3lDDkRcBw22oTfWgk",
    "reference": "CmRRAAAAZBpNfAiO2G_y57bLoFTSM28MG4xUi-VAg3kJgV2ZzksdhpzySwxdPNdPP1paEIE46i70oxgLHliUcEjxalukNEyhN85J-ryRbXVVMkg4Tz-MGBGhgVur7SV5b4IFePnfEhABXu9pHswL4Up5w-k9td94GhSDs13DRQVxPOpI8iWqUbLyd_WJUg",
    "scope": "GOOGLE",
    "types": ["restaurant", "food", "point_of_interest", "establishment"],
    "vicinity": "62, 8, Rani Jhansi Marg, Block 10, Sector 10, Noida"
  }],
  "status": "OK"
}

let results = resultJSON["results"];
for (var i = 0; i < results.length; i++) {
  let name = results[i]["name"];
  console.log(results[i].photos[0].photo_reference);
}

【讨论】:

  • 为什么不能使用方括号来访问对象?
  • ^ 我编辑了答案以澄清。您不能使用方括号来访问对象的属性。
  • @shivamkaushik 我做到了;请提供更多信息,并查看我的comment
  • 我在使用方括号访问对象属性方面得到了纠正,感谢@Daedalus。答案的那部分不正确或没有帮助,因此已被删除。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-08-04
  • 2015-06-08
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多