JavaScript sort array not working

Question

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>

Any ideas as to what could be going wrong?

From the result I assume, the page properties are strings. So you're doing string comparisons, for which the result is valid. — Sirko
– Sirko, Commented Jun 7, 2017 at 6:35
@JaromandaX Of course, how stupid of me! I'll accept your answer if you write it up. — David J.
– David J., Commented Jun 7, 2017 at 6:35
I'm sure it's been done before :p no need to have yet another sort question :p — Jaromanda X
– Jaromanda X, Commented Jun 7, 2017 at 6:36

Robby Cornelissen · Accepted Answer · 2017-06-07 06:37:09Z

1

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.

edited Jun 7, 2017 at 6:37

answered Jun 7, 2017 at 6:35

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sirko Over a year ago

The number conversion can probably be done before when creating the array. No need to repeatedly convert each property.

Robby Cornelissen Over a year ago

@Sirko Completely agree

Prasanth Jaya · Accepted Answer · 2017-06-07 06:37:44Z

1

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

answered Jun 7, 2017 at 6:37

Prasanth Jaya

4,8062 gold badges27 silver badges34 bronze badges

Comments

Invalid · Accepted Answer · 2017-06-07 06:37:57Z

0

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

answered Jun 7, 2017 at 6:37

Invalid

661 silver badge5 bronze badges

Collectives™ on Stack Overflow

JavaScript sort array not working

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related