【发布时间】：2018-10-07 20:44:26
【问题描述】：
在我下面的 ajax 调用中，我从 JSON 文件调用内容，但是，我得到下面列出的错误。
TypeError：无法读取未定义的属性“image_url” 在 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"}
]
}
【问题讨论】：
-
为什么不直接使用
fetch而不是一个hacky 的自定义get函数？ -
到目前为止我还没有使用 fetch，在这个例子中，当我遇到当前的问题时，我实际上是在尝试习惯使用 Promise 和 ajax 调用的想法。
标签： javascript ajax typeerror