使用javascript/JQM对JSON对象进行排序并附加到html中

Sort JSON objects and append to html using javascript/JQM

本文关键字：排序 html javascript JQM 对象 JSON 使用      更新时间：2024-07-04

第一次使用JSON，javascript/JQM 初学者

我正在尝试读取一个JSON文件，按国家名称（即标题）对其进行排序，并显示在列表视图中。我不确定我尝试使用二维数组进行排序是否过于复杂。如有任何帮助，不胜感激。

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"
  },...
]

创建一个排序比较函数，用于比较数组中对象的标题字段（FoundHERE）：

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");

工作演示

相关文章：