我正在从URL加载以下JSON文件:
{
"Airports": [
{
"listing": "East 34th Street Heliport",
"iata": "TSS",
"type": "heliport",
"size": "tiny"
},
{
"listing": "Blaine Municipal Airport",
"iata": "BWS",
"type": "closed",
"size": "small"
},
{
"listing": "Toronto City Airport",
"iata": "YTZ",
"type": "airport",
"size": "medium"
},
{
"listing": "Amsterdam Airport Schiphol",
"iata": "AMS",
"type": "airport",
"size": "large"
},
{
"listing": "Detroit County Airport",
"iata": "DTW",
"type": "airport",
"size": "large"
}
]
}
我想通过机场数组,并在DOM上显示所有关键名称和值。我使用jQuery Mobile在.each((循环中这样做:
if(pageID == "page1"){
var pageTitle="Error";
//temp var to hold collapsible HTML
var colItem="";
$.ajax({
url:"some_url",
method:"GET",
cache:false,
dataType:"json",
success:function(data){
pageTitle = (Object.keys(data)[0]).toUpperCase();
$(data.Airports).each(function(index,value){
//build all the needed collapsibles
colItem +=
"<div data-role='collapsible'><h2>"
+ value.listing +
"</h2> <p>"
+ +
"</p> <p>"
+ +
"</p> <p>"
+ +
"</p></div>";
});
}
});
是否可以在不引用诸如我使用value的工作之类的关键值的情况下进行此操作。清单,而是像数组一样迭代它,以这种方式获取所有值。
我正在寻找与此类似的最终结果:
East 34th Street Heliport
iata TSS
type heliport
size tiny
您可以这样做。动态创建HTML字符串,然后将其添加到主HTML页面:
var jsonData = {
"Airports": [
{
"listing": "East 34th Street Heliport",
"iata": "TSS",
"type": "heliport",
"size": "tiny"
},
{
"listing": "Blaine Municipal Airport",
"iata": "BWS",
"type": "closed",
"size": "small"
},
{
"listing": "Toronto City Airport",
"iata": "YTZ",
"type": "airport",
"size": "medium"
},
{
"listing": "Amsterdam Airport Schiphol",
"iata": "AMS",
"type": "airport",
"size": "large"
},
{
"listing": "Detroit County Airport",
"iata": "DTW",
"type": "airport",
"size": "large"
}
]
};
var nHTML = '';
jsonData.Airports.forEach(function(airport){
var paragraph = '';
paragraph+='<p>iata: '+airport.iata+'</p>' +
'<p>type: '+airport.type+'</p>' +
'<p>size: '+airport.size+'</p>';
var colItem = '<div data-role="collapsible">' +airport.listing+ '<h2></h2>'+paragraph+'</div>';
nHTML+=colItem;
});
$('#container').html(nHTML);
#container div{
margin: 7px;
background: grey;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'></div>
这是您如何做的非常简单的JSfiddle:
https://jsfiddle.net/8euuoccf/
var jsonData = {
"Airports": [{
"listing": "East 34th Street Heliport",
"iata": "TSS",
"type": "heliport",
"size": "tiny"
},
{
"listing": "Blaine Municipal Airport",
"iata": "BWS",
"type": "closed",
"size": "small"
},
{
"listing": "Toronto City Airport",
"iata": "YTZ",
"type": "airport",
"size": "medium"
},
{
"listing": "Amsterdam Airport Schiphol",
"iata": "AMS",
"type": "airport",
"size": "large"
},
{
"listing": "Detroit County Airport",
"iata": "DTW",
"type": "airport",
"size": "large"
}
]
};
$(document).ready(function() {
// Iterate over each airport
jsonData.Airports.forEach(airport => {
colItem = `<div data-role='collapsible'><h2>${airport.listing}</h2>`;
// Iterate over each airport key
Object.keys(airport).forEach(key => {
colItem += `<p>${key}: ${airport[key]}</p>`;
});
colItem += '</div>';
// Finally, append it to body
var html = $.parseHTML(colItem);
$('body').append(colItem);
});
});
有几种迭代对象键/值的方法。Object.entries()
是另一种选择,但请记住,IE不支持它。在此示例中,我使用了Object.keys()
,然后访问相应的值。如果您想要DOM中的另一种格式(例如表(,请使用key
和airport[key]
,并将其附加并添加。