getJSON 在第 4 個元素后返回“未定義”
[英]getJSON returning 'undefined' after 4th element
問題描述
我是 js 的初學者，我正在嘗試將 JSON 文檔讀入 html 表。 好吧，表格創建了，並且幾乎所有表格都正確地填滿了表格。 但是，在第四個數據條目之后，最后一列都是未定義的。
信息是偽造的
這是我的代碼...
<html>
<head>
<link rel="stylesheet" href="mapDiv.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id = "googleMap"></div>
<script>
function myMap() {
var mapProp= {
center:new google.maps.LatLng(36.3385,-88.8503),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="Redacted due to api key"></script>
<hr>
<div class = "container">
<div class = "table-responsive">
<table class = "table table-bordered table-striped" id = "customerData">
<tr>
<th>Name</th>
<th>Address</th>
<th>CSZ</th>
<th>latLang</th>
<th>Image</th>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$.getJSON("http://cs1.utm.edu/~bbradley/map1/customers1.json", function(data){
var custData = '';
$.each(data, function(key, value){
custData += '<tr>';
custData += '<td>' +value.name+'</td>';
custData += '<td>' +value.address+'</td>';
custData += '<td>' +value.cityStateZip+'</td>';
custData += '<td>' +value.latLang+'</td>';
custData += '<td>' +value.image+'</td>';
custData += '</tr>';
});
$('#customerData').append(custData);
});
});
</script>
鏈接到 json
2 個解決方案
解決方案1
2 已采納 2020-02-13 01:17:06
JSON 數據中的某些項目沒有image屬性。 您應該檢查這一點並在適當的位置顯示其他內容。
custData += '<td>' +(value.image || "No image available")+'</td>';
解決方案2
1 2020-02-13 01:31:13
只是為了您的澄清，我在此處粘貼了 json 結果中的第 3 項和第 4 項：
Item3: {
"name": "Trina Anderson",
"address": "112 South Niles Avenue",
"cityStateZip": "South Bend, Indiana 46617",
"latLang": "41.6759656:-86.24418419999999",
"image": "./people/NDExMTAuanBn.jpg"
}
Item4: {
"name": "Stephanie Mcghee",
"address": "2435 Beaujolais",
"cityStateZip": "O'Fallon, Missouri 63368",
"latLang": "38.77378059999999:-90.70446230000002"
},
在這種情況下， item4 沒有image屬性，因此在這種情況下，嘗試使用value.image時它顯示為 undefined
$.each(data, function(key, value){
// here **value** is containing the each item from the json list at each iteration
});
所以你可以避免打印結果，或者你可以用默認圖像或其他任何東西替換它。
例子：
$.each(data, function(key, value){
custData += '<tr>';
custData += '<td>' +value.name+'</td>';
custData += '<td>' +value.address+'</td>';
custData += '<td>' +value.cityStateZip+'</td>';
custData += '<td>' +value.latLang+'</td>';
custData += '<td>' +value.image || 'Image not exist'+'</td>';
custData += '</tr>';
});
getJSON返回未定義
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.