第一次使用 JSON，并且是 javascript/JQM 的初学者
我正在尝试读取 JSON 文件，按国家/地区名称(即标题)对其进行排序并显示在 ListView 中。我不确定尝试使用二维数组进行排序是否使事情变得过于复杂。任何帮助，非常感谢。
js
<script type="text/javascript">
function ajax_get_json(){
var hr = new XMLHttpRequest();
hr.open("GET", "european_countries.json", true);
hr.setRequestHeader("Content-type", "application/json", true);
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var data = JSON.parse (hr.responseText);
var results = document.getElementById("results");
var country, flag, population, avg_growth, date;
for (var obj in data){
var countries = [[]];
var i = 0;
title = data[obj].title;
flag = data[obj].flag;
population = data[obj].population;
avg_growth = data[obj].avg_annual_growth;
date = data[obj].date;
countries[i][0] = title;
countries[i][1] = flag;
countries[i][2] = population;
countries[i][3] = avg_growth;
countries[i][4] = date;
i++;
}
countries.sort();
var listHTML = "";
for (i=0; i < countries.length; i++) {
for (var details in countries[i]) {
listHTML += '<li><a href="#' + countries[i][0] + '</a></li>';
}
}
$("#countryList").empty().append(listHTML).listview("refresh");
}
}
hr.send(null);
// display message while data loading
// could include animated gif or image here
results.innerHTML = "requesting...";
}
</script>
html
<body>
<div id="results"></div>
<div data-role="page" id="home">
<div data-role="header">
<h2>European Countries</h2>
</div>
<div role="main">
<div id="test"></div>
<ul id="countryList" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
<li></li>
</ul>
</div>
<div data-role="footer">
</div>
</div><!-- page -->
<script type="text/javascript">
ajax_get_json();
</script>
</body>
json
{
"c1":{
"title":"Russia",
"flag":"flags/flags/Russia.png",
"population":"144,031,000",
"avg_annual_growth":"250,000",
"date":"January 1, 2015"
},
"c2":{
"title":"Germany",
"flag":"flags/Germany.png",
"population":"81,172,000",
"avg_annual_growth":"271,000",
"date":"December 31, 2013"
},
"c3":{
"title":"Turkey",
"flag":"flags/flags/Turkey.png",
"population":"78,214,000",
"avg_annual_growth":"1,035,000",
"date":"December 31, 2014"
}, ...etc
最佳答案
您可以将 JSON 对象转换为单个国家/地区对象数组
[
{
title:"Russia",
flag:"flags/flags/Russia.png",
population:"144,031,000",
avg_annual_growth:"250,000",
date:"January 1, 2015"
},...
]
创建一个排序比较函数，比较数组中对象的标题字段(Found HERE ):
function compare(a,b) {
if (a.title < b.title)
return -1;
if (a.title > b.title)
return 1;
return 0;
}
所以你的代码最终会是这样的:
var countries = [];
for (var obj in data){
countries.push({
title: data[obj].title,
flag: data[obj].flag,
population: data[obj].population,
avg_annual_growth: data[obj].avg_annual_growth,
date: data[obj].date
});
}
countries.sort(compare);
var listHTML = "";
for (var i=0; i < countries.length; i++) {
listHTML += '<li><a href="#' + countries[i].title + '">' + countries[i].title + '</a></li>';
}
$("#countryList").empty().append(listHTML).listview("refresh");
Working DEMO
关于javascript - 使用 javascript/JQM 对 JSON 对象进行排序并附加到 html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28773448/