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
  • 204,283
  • 31
  • 260
  • 272

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
Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217
  • Thank you, but I've tryied this function before and still can't get it to sort. Maybe a better question is that where should I insert this function? Is there any differance? – Sander Allmere Aug 08 '14 at 12:51
  • @SanderAllmere If you call this at the top of your AJAX suc You can verify it by doing `console.log(data)` after the call to sort – Ruan Mendes Aug 08 '14 at 12:57
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,684
  • 17
  • 71
  • 92