jQM Sort JSON Obj then listview

by Erik Zanker

HTML

<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 -->

JavaScript

var data = {
    "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"
    }
};
    
function compare(a,b) {
  if (a.title < b.title)
     return -1;
  if (a.title > b.title)
    return 1;
  return 0;
}

$(document).on("pagecreate", "#home", function () {

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


});