如何在JavaScript或jQuery中对每个数组记录具有多个对象的数组进行排序

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 F lowerpower then G uiness then H ello 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.

Answer 1

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) 

Answer 2

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

Answer 3

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;
});

Answer 4

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