开发者问题收集

TypeError：无法读取 JSON 上未定义的 Ajax 调用的属性“值”

2018-04-27
369
javascript ajax typeerror

在下面的 ajax 调用中，我调用 JSON 文件中的内容，但是，我收到下面列出的错误。

TypeError: Cannot read property 'image_url' of undefined at myscripts.js:26

如果我使用 (realestate)[0] 定位 JSON 数据的第一部分，则不会出现错误，但是如果我使用 (realestate)[1] 定位第二部分，则会出现错误。

我已经研究了几个小时，但还是没有找到答案，有人可以解释一下发生了什么以及为什么它无法识别属性类型吗？ 

window.onload = function(){
  function get (url){
    return new Promise(function(resolve, reject){
      var xhttp = new XMLHttpRequest();
      xhttp.open('GET', url, true);
      xhttp.onload = function(){
        if (xhttp.status == 200){
          resolve(JSON.parse(xhttp.response));
        } else{
          reject(xhttp.statusText);
        }
      };
      xhttp.onerror = function (){
        reject(xhttp.statusText);
      };
      xhttp.send();
    });
  }

  var promise = get('url');
  promise.then(function(realestate){

    for (var key in realestate) {
      for (var i = 0; i < realestate[key].length; i++) {
        var image_url   = realestate[Object.keys(realestate)[1]][i].image_url;
        var name        = realestate[Object.keys(realestate)[1]][i].name;
        var price       = realestate[Object.keys(realestate)[1]][i].price;
        var squareFt    = realestate[Object.keys(realestate)[1]][i].squareFt;
        var collection2 = document.createElement('div');
        collection2.className = 'house';
        collection2.innerHTML =
          `<img src="${image_url}">
<p>${name} <span>${price}</span></p>
<p>${squareFt}</p>
`;
        document.getElementById('sd-collection').appendChild(collection2);      
      }
    }

  }).catch(function(error){
    console.log(error);
  });
};

JSON 文件内容 

{ 
        "40_collection": [
            {"image_url":"material/images/model-fpo.jpg","name":"Chealse 1","price":"$900,000","squareFt":"4343 SQ. FT"},
            {"image_url":"material/images/model-fpo.jpg","name":"Chealse 2","price":"$800,000","squareFt":"4545 SQ. FT"},
            {"image_url":"material/images/model-fpo.jpg","name":"Chealse 3","price":"$700,000","squareFt":"1238 SQ. FT"},
            {"image_url":"material/images/model-fpo.jpg","name":"Chealse 4","price":"$600,000","squareFt":"1257 SQ. FT"},
            {"image_url":"material/images/model-fpo.jpg","name":"Chealse 5","price":"$200,000","squareFt":"2120 SQ. FT"},
            {"image_url":"material/images/model-fpo.jpg","name":"Chealse 6","price":"$805,000","squareFt":"7878 SQ. FT"},
            {"image_url":"material/images/model-fpo.jpg","name":"Chealse 7","price":"$620,000","squareFt":"9898 SQ. FT"},
            {"image_url":"material/images/model-fpo.jpg","name":"Chealse 8","price":"$150,000","squareFt":"8989 SQ. FT"},
            {"image_url":"material/images/model-fpo.jpg","name":"Chealse 9","price":"$600,000","squareFt":"1212 SQ. FT"},
            {"image_url":"material/images/model-fpo.jpg","name":"Chealse 10","price":"$100,000","squareFt":"2323 SQ. FT"}
            ],
        "sd_collection": [
            {"image_url":"material/images/model-fpo.jpg","name":"Chealse 11","price":"$500,000","squareFt":"4321 SQ. FT"},
            {"image_url":"material/images/model-fpo.jpg","name":"Chealse 12","price":"$700,000","squareFt":"7824 SQ. FT"},
            {"image_url":"material/images/model-fpo.jpg","name":"Chealse 13","price":"$600,000","squareFt":"7812 SQ. FT"},
            {"image_url":"material/images/model-fpo.jpg","name":"Chealse 14","price":"$950,000","squareFt":"9794 SQ. FT"},
            {"image_url":"material/images/model-fpo.jpg","name":"Chealse 15","price":"$350,000","squareFt":"1234 SQ. FT"}
    ]
}
2个回答

您正在迭代每个键并迭代 realestate[key] 中的每个元素，但随后您总是尝试访问 第二个 数组 sd_collection 中的第 i 个元素，该数组只有 5 个元素。第一个数组包含更多元素；因此，一旦 i 达到 5，访问第二个数组中 [5] 的索引将导致错误。

使用数组方法会更好。您似乎没有使用 key ，因此请使用 Object.values ： 

const realestate = { 
  "40_collection": [
    {"image_url":"material/images/model-fpo.jpg","name":"Chealse 1","price":"$900,000","squareFt":"4343 SQ. FT"},
    {"image_url":"material/images/model-fpo.jpg","name":"Chealse 2","price":"$800,000","squareFt":"4545 SQ. FT"},
    {"image_url":"material/images/model-fpo.jpg","name":"Chealse 3","price":"$700,000","squareFt":"1238 SQ. FT"},
    {"image_url":"material/images/model-fpo.jpg","name":"Chealse 4","price":"$600,000","squareFt":"1257 SQ. FT"},
    {"image_url":"material/images/model-fpo.jpg","name":"Chealse 5","price":"$200,000","squareFt":"2120 SQ. FT"},
    {"image_url":"material/images/model-fpo.jpg","name":"Chealse 6","price":"$805,000","squareFt":"7878 SQ. FT"},
    {"image_url":"material/images/model-fpo.jpg","name":"Chealse 7","price":"$620,000","squareFt":"9898 SQ. FT"},
    {"image_url":"material/images/model-fpo.jpg","name":"Chealse 8","price":"$150,000","squareFt":"8989 SQ. FT"},
    {"image_url":"material/images/model-fpo.jpg","name":"Chealse 9","price":"$600,000","squareFt":"1212 SQ. FT"},
    {"image_url":"material/images/model-fpo.jpg","name":"Chealse 10","price":"$100,000","squareFt":"2323 SQ. FT"}
  ],
  "sd_collection": [
    {"image_url":"material/images/model-fpo.jpg","name":"Chealse 11","price":"$500,000","squareFt":"4321 SQ. FT"},
    {"image_url":"material/images/model-fpo.jpg","name":"Chealse 12","price":"$700,000","squareFt":"7824 SQ. FT"},
    {"image_url":"material/images/model-fpo.jpg","name":"Chealse 13","price":"$600,000","squareFt":"7812 SQ. FT"},
    {"image_url":"material/images/model-fpo.jpg","name":"Chealse 14","price":"$950,000","squareFt":"9794 SQ. FT"},
    {"image_url":"material/images/model-fpo.jpg","name":"Chealse 15","price":"$350,000","squareFt":"1234 SQ. FT"}
  ]
};

Object.values(realestate).forEach((arr) => {
  arr.forEach(({ image_url, name, price, squareFt }) => {
    var collection2 = document.createElement('div');
    collection2.className = 'house';
    collection2.innerHTML =
      `<img src="${image_url}">
<p>${name} <span>${price}</span></p>
<p>${squareFt}</p>
`;
    document.getElementById('sd-collection').appendChild(collection2);      
  })
});
<div id="sd-collection"></div>

或者，如果您只想迭代第二个集合： 

const realestate = { 
"40_collection": [
  {"image_url":"material/images/model-fpo.jpg","name":"Chealse 1","price":"$900,000","squareFt":"4343 SQ. FT"},
  {"image_url":"material/images/model-fpo.jpg","name":"Chealse 2","price":"$800,000","squareFt":"4545 SQ. FT"},
  {"image_url":"material/images/model-fpo.jpg","name":"Chealse 3","price":"$700,000","squareFt":"1238 SQ. FT"},
  {"image_url":"material/images/model-fpo.jpg","name":"Chealse 4","price":"$600,000","squareFt":"1257 SQ. FT"},
  {"image_url":"material/images/model-fpo.jpg","name":"Chealse 5","price":"$200,000","squareFt":"2120 SQ. FT"},
  {"image_url":"material/images/model-fpo.jpg","name":"Chealse 6","price":"$805,000","squareFt":"7878 SQ. FT"},
  {"image_url":"material/images/model-fpo.jpg","name":"Chealse 7","price":"$620,000","squareFt":"9898 SQ. FT"},
  {"image_url":"material/images/model-fpo.jpg","name":"Chealse 8","price":"$150,000","squareFt":"8989 SQ. FT"},
  {"image_url":"material/images/model-fpo.jpg","name":"Chealse 9","price":"$600,000","squareFt":"1212 SQ. FT"},
  {"image_url":"material/images/model-fpo.jpg","name":"Chealse 10","price":"$100,000","squareFt":"2323 SQ. FT"}
],
"sd_collection": [
  {"image_url":"material/images/model-fpo.jpg","name":"Chealse 11","price":"$500,000","squareFt":"4321 SQ. FT"},
  {"image_url":"material/images/model-fpo.jpg","name":"Chealse 12","price":"$700,000","squareFt":"7824 SQ. FT"},
  {"image_url":"material/images/model-fpo.jpg","name":"Chealse 13","price":"$600,000","squareFt":"7812 SQ. FT"},
  {"image_url":"material/images/model-fpo.jpg","name":"Chealse 14","price":"$950,000","squareFt":"9794 SQ. FT"},
  {"image_url":"material/images/model-fpo.jpg","name":"Chealse 15","price":"$350,000","squareFt":"1234 SQ. FT"}
]
};


realestate.sd_collection.forEach(({ image_url, name, price, squareFt }) => {
  var collection2 = document.createElement('div');
  collection2.className = 'house';
  collection2.innerHTML =
    `<img src="${image_url}">
<p>${name} <span>${price}</span></p>
<p>${squareFt}</p>
`;
  document.getElementById('sd-collection').appendChild(collection2);      
});
<div id="sd-collection"></div>
CertainPerformance
2018-04-27

下面的方法有效吗？ 

promise.then(function (realEstate) {
  return Object.keys(realEstate).reduce(
    function(all,key){
      const items = realEstate[key].map(
        function(houseItem){
          const htmlElement = document.createElement('div');
          htmlElement.className = 'house';
          htmlElement.innerHTML =
            `<img src="${houseItem.image_url}">
                <p>${houseItem.name} <span>${houseItem.price}</span></p>
                <p>${houseItem.squareFt}</p>
                `;
          return htmlElement;
        }
      );
      return all.concat(items);
    },
    []
  );
}).then(function(htmlElements){
  const container = document.getElementById('sd-collection');
  return htmlElements.forEach(
    function(htmlElement){
      container.appendChild(htmlElement);
      return htmlElement;//you may want to do something with the html elements
    }
  )
})
.catch(function (error) {
  console.log(error);
});
HMR
2018-04-27