DEV Community

Abhi Raj
Abhi Raj

Posted on

Sort array of JSON object by key value easily with JavaScript

#javascript #programming #tutorial #webdev


in this video i have explained how you can Sort array of JSON object by key value easily with JavaScript

for those of you who don't want to watch video here is the code:

suppose this is the array of JSON object

var data = [
  { id: 2, name: "FIAT", active: true, parentId: "1" },
  { id: 11, name: "BMW", active: true, parentId: "1" },
  { id: 3, name: "RENAULT", active: false, parentId: "1" },
  { id: 0, name: "AUDI", active: true, parentId: "1" },
];
Enter fullscreen mode Exit fullscreen mode

now if you want to sort this array of json object by id basis you can simply do this by

data = data.sort((a, b) => {
  if (a.id < b.id) {
    return -1;
  }
});
Enter fullscreen mode Exit fullscreen mode

result would be :

 [
  { id: 0, name: 'AUDI', active: true, parentId: '1' },
  { id: 2, name: 'FIAT', active: true, parentId: '1' },
  { id: 3, name: 'RENAULT', active: false, parentId: '1' },
  { id: 11, name: 'BMW', active: true, parentId: '1' }
]
Enter fullscreen mode Exit fullscreen mode

you can read more about JavaScript array.sort method from here

if you want to sort this array of JSON object by name basis (i.e, sort it alphabetically) you can simply do this by

data = data.sort((a, b) => {
  if (a.name < b.name) {
    return -1;
  }
});
Enter fullscreen mode Exit fullscreen mode

result would be :

 [
  { id: 0, name: 'AUDI', active: true, parentId: '1' },
  { id: 11, name: 'BMW', active: true, parentId: '1' },
  { id: 2, name: 'FIAT', active: true, parentId: '1' },
  { id: 3, name: 'RENAULT', active: false, parentId: '1' }
]
Enter fullscreen mode Exit fullscreen mode

if you want to sort this array of JSON object by active basis (i.e, sort it on boolean value) you can simply do this by

data = data.sort((a, b) => {
  if (a.active == true && b.active == false) {
    return -1;
  }
  if (b.active == true && a.active == false) {
    return -1;
  }
});
Enter fullscreen mode Exit fullscreen mode

result would be :

 [
  { id: 3, name: 'RENAULT', active: false, parentId: '1' },
  { id: 2, name: 'FIAT', active: true, parentId: '1' },
  { id: 11, name: 'BMW', active: true, parentId: '1' },
  { id: 0, name: 'AUDI', active: true, parentId: '1' }
]
Enter fullscreen mode Exit fullscreen mode

Top comments (7)

Collapse
 
slimpython profile image
Abhi Raj •

after taking the feedback of my last post i provided the code as well

Collapse
 
slimpython profile image
Abhi Raj • • Edited

let me know if i can do something else too to improve the article

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • • Edited

Nice! if you want to improve your posts maybe you can set the language to this code blocks using markdown like that:



```js
// your code goes here
```

So they got colourised accordingly, example:

data = data.sort((a, b) => {
  if (a.active == true && b.active == false) return -1;
  if (b.active == true && a.active == false) return -1;
});
Enter fullscreen mode Exit fullscreen mode
Collapse
 
zabdeldjallil profile image
Djilou •

"easier" way to do is :
data.sort((prev,next)=>prev.id-next.id)

which will return

[
{
"id": 0,
"name": "AUDI",
"active": true,
"parentId": "1"
},
{
"id": 2,
"name": "FIAT",
"active": true,
"parentId": "1"
},
{
"id": 3,
"name": "RENAULT",
"active": false,
"parentId": "1"
},
{
"id": 11,
"name": "BMW",
"active": true,
"parentId": "1"
}
]
for more informations w3schools.com/js/js_array_sort.asp

Collapse
 
frankwisniewski profile image
Frank Wisniewski • 
data = data.sort((a, b) =>  a.name.localeCompare(b.name));
Enter fullscreen mode Exit fullscreen mode

You should always consider local conditions when sorting.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • • Edited

Adding the localeCompare reference

Another way to reach that is using Intl.Collator which has better performance for large arrays.

Collapse
 
afandre profile image
Andrew Fandre •

Thanks, good concise explanation.

Read next

prince_beec5ccde00b7c6c73 profile image

Notice Board Realistic illusion using html css and javascript https://www.instagram.com/webstreet_code/

Prince -

leandroveiga profile image

Master Advanced LINQ in C#: Writing Ultra-Efficient Queries for Massive Datasets

Leandro Veiga -

reversecher profile image

Building a Free Online Music Creator: Free Incredibox Sprunki

reverse Ch -

muhammadawaisshaikh profile image

Streamlining API Calls in Angular v18 with TanStack Angular Query

Muhammad Awais -