How to sort an array of object by a specific field Javascript

Question

I have an array containing multiple objects with multiple fields, and I'm trying to sort the array in decending order from the largest "Views" value to the lowest. but when I run my code it outputs a few in order, but the majority are random. There are a lot more array rows in my project if that could be affecting it.

list = [{title: "Test1", views: "25"}, {title: "Test2", "105"}, {title: "Test3", views: "12"}]
var len = list.length - 1;
list.sort(function (a, b) {
    return a.views.localeCompare(b.views) || b.views - a.views;
});
for(var x = 0; x < len; x++) {
    displayFunc(list[x].title, list[x].views);
}

Desired output:

{title: "Test2", views: "105"}, {title: "Test1", "25"}, {title: "Test3", views: "12"}

localeCompare is sorting them in alphabetic order, your || option is only triggered when the values are the same, and subtracting them will only yield 0 again. Just use the subtraction list.sort((a, b) => b.views - a.views); — pilchard
– pilchard, Commented Jan 18, 2022 at 7:54
@pilchard Ahhh, thank you so much! I originally tried using 'list.sort()' but I didn't set it up properly so ended up switching to '.localeCompare()' hoping that would work. Thank you very much, I really appreciate it! — Chasetopher
– Chasetopher, Commented Jan 18, 2022 at 8:07

MWO · Accepted Answer · 2022-01-18 07:58:12Z

4

As mentioned in the comments, you dont need a localecompare here:

const list = [{title: "Test1", views: "25"}, {title: "Test2", views: "105"}, {title: "Test3", views: "12"}]

console.log(list.sort((a,b)=>{
    return  b.views - a.views
}));

answered Jan 18, 2022 at 7:58

MWO

2,8462 gold badges12 silver badges28 bronze badges

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

1 Comment

Stephen Ostermiller Over a year ago

When your anonymous method implementation is a single statement you can omit the return and curly brackets. This can be more simply written as console.log(list.sort((a,b)=>b.views - a.views))

RGA · Accepted Answer · 2022-01-18 12:51:01Z

0

We can use any key available in object to sort. As per your requirement, 'view' is used here,

const list = [{title: "Test1", views: "25"}, {title: "Test2", views: "105"}, {title: "Test3", views: "12"}]

console.log(list.sort((a, b) => b.views - a.views));

answered Jan 18, 2022 at 12:51

RGA

3134 silver badges12 bronze badges

Comments

Christian · Accepted Answer · 2022-01-19 07:45:50Z

0

You have some errors in your code. I corrected your version and give you a somewhat better, more modern version.

const list = [{title: "Test1", views: "25"}, {title: "Test2", views: "105"}, {title: "Test3", views: "12"}];
var len = list.length;
const list_sorted = list.sort(function (a, b) {
    return parseInt(b.views, 10) - parseInt(a.views, 10);
});
for(var x = 0; x < len; x++) {
    console.log(list[x].title, list[x].views);
}

/// Better
list
  .map(el => ({ ...el, views: parseInt(el.views, 10) }))
  .sort((a,b) => b.views - a.views)
  .forEach(el => console.log(el.title, el.views));

edited Jan 19, 2022 at 7:45

answered Jan 18, 2022 at 8:00

Christian

4,1643 gold badges29 silver badges49 bronze badges

7 Comments

pilchard Over a year ago

Always specify a radix when using parseInt(), it does not default to 10.

Christian Over a year ago

Good one. Therefore linting is good,

Andreas Over a year ago

@pilchard "...it does not default to 10" - It does -> 19.2.5 parseInt ( string, radix ) -> Step 9

pilchard Over a year ago

@Andreas it's not a hard default but a fallback after parsing the input. If it always defaulted to 10 parseInt('0x10') and parseInt('0x10', 10) would return the same value

Andreas Over a year ago

@pilchard "but a fallback after parsing the input" - How would that even make any sense? I first parse the input and then later in the execution I determine the value of the radix parameter? o.O Your example is a special case that is handled in step 10.

|

Collectives™ on Stack Overflow

How to sort an array of object by a specific field Javascript

3 Answers 3

1 Comment

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related