0

I have a simple site that collects local beach weather data from an xml feed and displays it in a mobile friendly site (rannailm.com) using javascript.

Could someone please help me with a simple way to add alphabetical sorting to this list based on "koht" (meaning location) variable.

I've messed something up no mater what I've tried.

My current script below:

<script type="text/javascript">
    $(function () {

        $.getJSON('http://rannailm.com/g4s.json', function (data) {
            var temperatures = data;

            var listItems = $.map(temperatures, function (item) {
            if (!item.IsHidden)
            {
                    var koht = !item.KohtFixed ? item.Koht : item.KohtFixed;
                    return $('<li class="m-item">')
                        .append(
                            $('<h3 class="m-header">').append($('<a>').html(koht + " " + item.Vesi)),
                            $('<div class="m-content">')
                            .append($('<div class="m-inner-content">')
                                .append($('<img>').attr("src", getImage(item.Ilm)).attr("alt", item.Ilm).addClass("ilmIkoon"))
                                .append($('<img>').attr("src", getImage(item.Lipp)).attr("alt", item.Lipp).addClass("lipp"))
                                .append($('<p>').html("ÕHK " + item.Temp))
                                .append($('<p>').html("RAHVAST " + item.Rahvast))
                                .append($('<h5>').html("Viimati uuendatud " + item.Aeg))));
            }
                });

                $('#temp-list').empty().append(listItems);
                $('.m-bellows').bellows();

        });
    });       

</script>
j08691
  • 197,815
  • 30
  • 248
  • 265

2 Answers2

0

You can sort your data using https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

$.getJSON('http://rannailm.com/g4s.json', function (data) {
    data.sort(function(a, b) {
       if (a.Koht > b.Koht) return 1;
       if (a.Koht < b.Koht) return -1;
       return 0;
    })
    // This is not really needed, if you want a different name, just
    // change the parameter name from data to temperatures
    var temperatures = data;

    var listItems = $.map(temperatures, function (item) {
    if (!item.IsHidden) 
    // rest of your code

See Sort array of objects by string property value in JavaScript

Community
  • 1
  • 1
Juan Mendes
  • 85,853
  • 29
  • 146
  • 204
0

Using the result of your json data response, you can sort in native javascript.

// just test data 
var data = []; 

for(var i=0;i<10;i++){
    data.push({ koht: (i+1*3), name : "blab bla " + i.toString() });    
}

// ascending 
data.sort(function(a, b) {
   return a.koht - b.koht; 
}); 

alert(data[0].koht + "  " + data[0].name);        

// descending 
data.sort(function(a, b) {
   return b.koht - a.koht; 
}); 

alert(data[0].koht + "  " + data[0].name);    

You could wrap the sort functions in prototype methods:

 Array.prototype.SortAscending = function() {
           var arr = this; 
           return arr.sort(function(a, b) {
                 return a.koht - b.koht; 
           }); 
     }; 

     Array.prototype.SortDescending = function() {
            var arr = this; 
            return arr.sort(function(a, b) {
                return b.koht - a.koht; 
              }); 
     }; 

  //   then you can use those functions in your code like this: 



    data.SortAscending(); 

      //or sort descending: 

      data.SortDescending(); 
marko
  • 10,205
  • 16
  • 68
  • 91