CODEWITHSUNDEEP
javascriptarrayssortingvue.jscomputed-properties
David J.
David J.

Reputation: 1913

JavaScript sort array not working

I'm trying to sort an array of objects with an attribute page. This is being done in a computed property with Vue.

To do this I'm using the following function, which first builds the objects:

 sorted: function(){
     var pages = this.selectedKKS['pages'];
     var list;
     try {
       list = [];
       Object.keys(pages).forEach(function(key){
         console.log(key + " is the key")
         var obj = {};
         obj.title = key;
         obj.page = pages[key]
         list.push(obj)
     });         
     }
     catch(e){
       console.log(e);
     }
     var sorted = list.sort(function(a, b){
       console.log('a.page is ' + a.page + ' and b.page is ' + b.page);  
       return a.page > b.page;  

     });
     return sorted;      
 }

Just to make sure that I'm actually comparing pages as I intend, here's the console log: 

a.page is 84 and b.page is 28
App.vue?077f:353 a.page is 84 and b.page is 46
App.vue?077f:353 a.page is 28 and b.page is 46
App.vue?077f:353 a.page is 84 and b.page is 35
App.vue?077f:353 a.page is 46 and b.page is 35
App.vue?077f:353 a.page is 28 and b.page is 35
App.vue?077f:353 a.page is 84 and b.page is 14
App.vue?077f:353 a.page is 46 and b.page is 14
App.vue?077f:353 a.page is 35 and b.page is 14
App.vue?077f:353 a.page is 28 and b.page is 14
App.vue?077f:353 a.page is 84 and b.page is 5
App.vue?077f:353 a.page is 46 and b.page is 5
App.vue?077f:353 a.page is 84 and b.page is 8
App.vue?077f:353 a.page is 5 and b.page is 8

I'm looping over this computed property in my template, and since it's being sorted incorrectly it's giving me an undesirable result:

            <f7-list>
            <f7-list-item v-for="val in sorted" @click="openpdf(selectedKKS.url, val.page)">                    
                <f7-col><span style="color: black">{{ val.title }}</span></f7-col>                      
                <f7-col>{{ val.page }}</f7-col>                 
            </f7-list-item>
            </f7-list>

enter image description here

Any ideas as to what could be going wrong?

Upvotes: 1

Views: 3153

Answers (3)

Invalid
Invalid

Reputation: 66

callback function for sort must return a int number. lt return < 0 ,eq return 0 ,gt return > 0.

Upvotes: 0

Prasanth Jaya
Prasanth Jaya

Reputation: 4736

Try '-' instead '>' inside sorted function..

var sorted = list.sort(function(a, b){
   console.log('a.page is ' + a.page + ' and b.page is ' + b.page);  
   return a.page - b.page;  
 });

Hope it helps!!

Upvotes: 1

Robby Cornelissen
Robby Cornelissen

Reputation: 97130

Because the values are strings, they're sorted in lexical (alphabetical) instead of numerical order.

Change your sort function as follows:

list.sort(function(a, b){
    return Number(a.page) > Number(b.page);  
});

Or better still:

list.sort(function(a, b){
    return Number(a.page) - Number(b.page);  
});

As noted in the comments, it's better to do the number conversion during object creation to avoid having to repeatedly carry it out for each comparison.

Upvotes: 1

Related Questions