我试图在JavaScript中访问JSON对象并将它们显示在HTML表格中，我设法做到了但却未能显示其中一列。
<script>
var arrItems = []; // THE ARRAY TO STORE JSON ITEMS.
$.each(data.glance, function (index, value) {
arrItems.push(value); // PUSH THE VALUES INSIDE THE ARRAY.
// EXTRACT VALUE FOR TABLE HEADER.
var col = [];
for (var i = 0; i < arrItems.length; i++) {
for (var key in arrItems[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < arrItems.length; i++) {
tr = table.insertRow(-1);
data
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = arrItems[0];
tabCell.innerHTML = arrItems[i][col[j]];
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("daytoday");
divContainer.innerHTML = "";
divContainer.appendChild(table);
});
此外，我试图访问图像并在滑块中显示它们但不知道如何访问嵌套的图像对象，
问题：有人可以告诉我如何访问图片吗？
<script>
$('img[class="logo"]').attr('src',data.logo);
$('div[class="header_bg"]').css('background-image', 'url(' + data.topbanner + ')');
//alert(JSON.stringify(data.property_images));
var countDown=0;
$.each(data.property_information,function(key,value){
if(key!='NGORONGORO SOPA LODGE'){
//alert(key);
var cont="";
var innerDivTop ='<div class="centre-container">'
+'<div class="page-content">'
+'<div class="flex">'
+'<div class="body" style="width: 100%;">'
+'<div class="content-block"><h2 style="font-weight:bold">'+key+'</h2>'
+'<div class="flexslider">'
+'<div class="arrow-next" data-role="'+countDown+'"></div>'
+'<div class="arrow-back" data-role="'+countDown+'"></div>'
+'<ul class="services dynmic_'+countDown+'" >';
for(var i=0;i<value.length;i++) {
if(i==0) {
// alert(value[i]);
// console.log(value[i]);
cont +='<li style="display: block;"><img src="'+value[i]+'" alt="" style="width:1088px;height:430px;" ></li>';
} else {
cont +='<li><img src="'+value[i]+'" alt="" style="width:1088px;height:430px;"></li>';
}
}
var innerDivBot='</ul>'
+'</div></div></div></div></div></div>';
$('#contentRpt').append(innerDivTop+cont+innerDivBot);
countDown +=1;
}
});
这是我的Json数据示例：
{ "glance": {
"Day 1": {
"location": "ARUSHA",
"property": "THE ARUSHA HOTEL"
},
"Day 2": {
"location": "TARANGIRE NATIONAL PARK",
"property": "TARANGIRE SAFARI LODGE"
},
"Day 3": {
"location": "LAKE MANYARA NATIONAL PARK",
"property": "LAKE MANYARA HOTEL"
},
"Day 4": {
"location": "SERENGETI NATIONAL PARK",
"property": "SERENGETI SOPA LODGE"
},
"Day 5": {
"location": "SERENGETI NATIONAL PARK",
"property": "SERENGETI SOPA LODGE"
},
"Day 6": {
"location": "SERENGETI NATIONAL PARK",
"property": "SERENGETI SOPA LODGE"
},
"Day 7": {
"location": "NGORONGORO CONSERVATION AREA AUTHORITY",
"property": "NGORONGORO SOPA LODGE"
}
}, "property_information": {
"THE ARUSHA HOTEL": {
"description": "Arusha\u2019s supreme boutique hotel offering first class accommodation and service, surrounded by the history of bygone eras. The hotel boasts the finest location in the heart of Arusha, in the tranquil surroundings of its own tropical gardens.\r\n\r\nThe Arusha Hotel boasts 86 elegantly appointed rooms included 4 Suites, 25 Executive Deluxe rooms and 57 Superior Rooms. Professionally managed, we ensure the needs of every guest are carried out with East African charm and warmth.\r\n\r\n",
"images": [
"http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/the_arusha_hotel\/dining_parachichi.jpg",
"http:\/\/asktechtzco.tz\/spear22\/\/images\/demo\/accommodation\/the_arusha_hotel\/images-30.jpeg",
"http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/the_arusha_hotel\/room_superior1.jpg"
]
},
"TARANGIRE SAFARI LODGE": {
"description": "Built on top of a high bluff with a breathtaking panorama, our lodge is superbly located in Tarangire National Park, providing one of the best views in Africa.\r\n\r\nCarving out the landscape below the lodge is Tarangire River, a favourite watering place, which attracts impressive numbers and variety of game. The scene unfolds before you while lounging on the outdoor patio, allowing you to appreciate Tarangire\\\\\\\\\\\\\\'s diverse wildlife without ever leaving the lodge.",
"images": [
"http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/tarangire_safari_lodge\/images-31.jpeg",
"http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/tarangire_safari_lodge\/images-32.jpeg",
"http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/tarangire_safari_lodge\/images-33.jpeg"
]
}
}}
答案 0 :(得分：0)
您正在尝试显示属性名称，因此您首先在此处使用嵌套循环来访问对象属性及其值，然后再使用第二个循环从外部循环中提取的值中提取值。
试试这个
var data = {
"glance": {
"Day 1": {
"location": "ARUSHA",
"property": "THE ARUSHA HOTEL"
},
"Day 2": {
"location": "TARANGIRE NATIONAL PARK",
"property": "TARANGIRE SAFARI LODGE"
},
"Day 3": {
"location": "LAKE MANYARA NATIONAL PARK",
"property": "LAKE MANYARA HOTEL"
},
"Day 4": {
"location": "SERENGETI NATIONAL PARK",
"property": "SERENGETI SOPA LODGE"
},
"Day 5": {
"location": "SERENGETI NATIONAL PARK",
"property": "SERENGETI SOPA LODGE"
},
"Day 6": {
"location": "SERENGETI NATIONAL PARK",
"property": "SERENGETI SOPA LODGE"
},
"Day 7": {
"location": "NGORONGORO CONSERVATION AREA AUTHORITY",
"property": "NGORONGORO SOPA LODGE"
}
},
"property_information": {
"THE ARUSHA HOTEL": {
"description": "Arusha\u2019s supreme boutique hotel offering first class accommodation and service, surrounded by the history of bygone eras. The hotel boasts the finest location in the heart of Arusha, in the tranquil surroundings of its own tropical gardens.\r\n\r\nThe Arusha Hotel boasts 86 elegantly appointed rooms included 4 Suites, 25 Executive Deluxe rooms and 57 Superior Rooms. Professionally managed, we ensure the needs of every guest are carried out with East African charm and warmth.\r\n\r\n",
"images": [
"http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/the_arusha_hotel\/dining_parachichi.jpg",
"http:\/\/asktechtzco.tz\/spear22\/\/images\/demo\/accommodation\/the_arusha_hotel\/images-30.jpeg",
"http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/the_arusha_hotel\/room_superior1.jpg"
]
},
"TARANGIRE SAFARI LODGE": {
"description": "Built on top of a high bluff with a breathtaking panorama, our lodge is superbly located in Tarangire National Park, providing one of the best views in Africa.\r\n\r\nCarving out the landscape below the lodge is Tarangire River, a favourite watering place, which attracts impressive numbers and variety of game. The scene unfolds before you while lounging on the outdoor patio, allowing you to appreciate Tarangire\\\\\\\\\\\\\\'s diverse wildlife without ever leaving the lodge.",
"images": [
"http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/tarangire_safari_lodge\/images-31.jpeg",
"http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/tarangire_safari_lodge\/images-32.jpeg",
"http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/tarangire_safari_lodge\/images-33.jpeg"
]
}
}
};
$(function() {
table = $("<table></table>").appendTo("#daytoday");
table.append("<tr><th>DAY</th><th> LOCATION </th><th> HOTEL </th></tr>")
$.each(data.glance, function(index, value) {
row = $("<tr></tr>").appendTo(table);
$("<td></td>").appendTo(row).html(index);
$.each(value, function(i, v) {
$("<td></td>").appendTo(row).html(v);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="daytoday">
</div>for (var i = 0; i < value.images.length; i++) {
if (i == 0) {
// alert(value[i]);
// console.log(value[i]);
cont += '<li style="display: block;"><img src="' + value.images[i] + '" alt="" style="width:1088px;height:430px;" ></li>';
} else {
cont += '<li><img src="' + value.images[i] + '" alt="" style="width:1088px;height:430px;"></li>';
}
}
第二个问题：
对于第二个问题，您需要遍历valve的image属性 所以你需要在value.images上调用你的循环
所以改变你的内部循环就像这样
quotation