Forem

Abhi Raj
Abhi Raj

Posted on

15 2

Sort array of JSON object by key value easily with JavaScript


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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

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.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay