How to sort an array in JavaScript or jQuery with multiple objects per array record

Question

Before you may vote me down: I have checked all existing solutions around this problem but none was similar to this.

I want to sort this array alphabetically by image.name (JavaScript or jQuery):

var myArray = [{
    creator: {
      "firstname": "Sally",
      familyname: "Bloomfield"
    },
    location: {
      "lat": 12.123,
      lng: 8.846
    },
    image: {
      name: "Hello World",
      size: "50x80"
    }
  },
  {
    creator: {
      firstname: "Bob",
      familyname: "Jones"
    },
    location: {
      lat: 31.593,
      lng: 96.376
    },
    image: {
      name: "Flowerpower",
      size: "40x50"
    }
  },
  {
    creator: {
      firstname: "John",
      familyname: "Walker"
    },
    location: {
      lat: 27.184,
      lng: 123.120
    },
    image: {
      name: "Guiness",
      size: "33x66"
    }
  }
];

The array output after sort:

[{
    creator: {
      firstname: "Bob",
      familyname: "Jones"
    },
    location: {
      lat: 31.593,
      lng: 96.376
    },
    image: {
      name: "Flowerpower",
      size: "40x50"
    }
  },
  {
    creator: {
      firstname: "John",
      familyname: "Walker"
    },
    location: {
      lat: 27.184,
      lng: 123.120
    },
    image: {
      name: "Guiness",
      size: "33x66"
    }
  },
  {
    creator: {
      firstname: "Sally",
      familyname: "Bloomfield"
    },
    location: {
      lat: 12.123,
      lng: 8.846
    },
    image: {
      name: "Hello World",
      size: "50x80"
    }
  }
]

So first image Flowerpower then Guiness then Hello World.

The existing sort function of Javascript can't handle this as I have tried that out. Is it even possible to sort such structures?

Any help is appreciated.

You can pass your own comparator to the JavaScript sort function — Jacob, Jul 20 '18 at 00:59
@Jacob: I have done that by sending "image.name" but was ignored. — Jonny, Jul 20 '18 at 01:01
@Jacob: I was using the sortOn function from Bob: https://stackoverflow.com/questions/979256/sorting-an-array-of-javascript-objects Then I used it that way: sortOn (myArray, image.name, false, false); — Jonny, Jul 20 '18 at 01:07

Mark · Answer 1 · 2018-07-20T01:18:18.180

4

You can use localeCompare when sorting strings. Then it's just one line using Array.sort():

var myArray = [{creator: { "firstname": "Sally", familyname: "Bloomfield"},location: { "lat": 12.123, lng: 8.846},image: {name: "Hello World", size: "50x80"}},{creator: { firstname: "Bob", familyname: "Jones"},location: { lat: 31.593, lng: 96.376},image: {name: "Flowerpower", size: "40x50"}},{creator: { firstname: "John", familyname: "Walker"},location: { lat: 27.184, lng: 123.120},image: {name: "Guiness", size: "33x66"}}];

myArray.sort((a,b) => a.image.name.localeCompare(b.image.name))
console.log(myArray)

edited Jul 20 '18 at 01:18

answered Jul 20 '18 at 01:11

Mark

90,562
7
108
148

Thank you as well for correct solution and especially considering localeCompare! 1up! – Jonny Jul 20 '18 at 01:22
@Jonny you should use `localeCompare` rather than the selected answer if you want to make sure names with accents continues to work. The other solutions will put a name like `émile` at the end of the list rather than with the other `e`s. – Mark Jul 20 '18 at 01:24

score 2 · Accepted Answer · answered Jul 20 '18 at 01:03

2

myArray.sort(function(a, b) {
    if (a.image.name === b.image.name) {
        return 0;
    }
    return a.image.name < b.image.name ? -1 : 1;
});

answered Jul 20 '18 at 01:03

D. Seah

4,472
1
12
20

First and correct answer! Was not aware of using object access like image.name in the internal sort function. – Jonny Jul 20 '18 at 01:21

score 0 · Answer 3 · answered Jul 20 '18 at 01:10

0

You might be running into issues because you have a typo in your array. There's a lone double quote " on line 14.

This worked for me when I removed the extra quote:

var myArraySorted = myArray.sort((a, b) => {
   if (a.image.name < b.image.name) {
       return -1
   }
   return 1;
});

answered Jul 20 '18 at 01:10

Jeff Appareti

311
3
6

`Array.sort()` sorts the original in place. You don't need to assign the result to anything. – Mark Jul 20 '18 at 01:17
Thank you, corrected. Was a kinda simplified array sample I put together. – Jonny Jul 20 '18 at 01:19

score 0 · Answer 4 · answered Jul 20 '18 at 01:12

0

The arguments for the Array.prototype.sort() function compare items and shift their indexes alphabetical for type String and numerically for type Number. As you're sorting an Object you need to plug into the specific property you wish to target, like so...

function compare(a, b) {
    return a.image.name === b.image.name ? 0 :
        a.image.name < b.image.name ? -1 : 1;
}

var sorted = myArray.sort(compare);

Hope that helps :D

Array.sort @ MDN

answered Jul 20 '18 at 01:12

Brian Peacock

1,801
16
24

The problem with sorting strings this way is that it doesn't do sensible things with strings like `Elle` vs `Étienne`. – Mark Jul 20 '18 at 01:16

How to sort an array in JavaScript or jQuery with multiple objects per array record

4 Answers4