Сортировка массива объектов JSON по значению ключа легко с помощью JavaScript

В этом видео я объяснил, как можно легко отсортировать массив JSON-объектов по значению ключа с помощью JavaScript.

для тех из вас, кто не хочет смотреть видео, вот код:

предположим, что это массив JSON объектов.

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" },
];

Войти в полноэкранный режим Выйти из полноэкранного режима

теперь, если вы хотите отсортировать этот массив json объектов по id основе, вы можете просто сделать это с помощью команды

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

Войти в полноэкранный режим Выйти из полноэкранного режима

результат будет :

 [
  { 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' }
]

Войти в полноэкранный режим Выйти из полноэкранного режима

подробнее о методе JavaScript array.sort вы можете прочитать здесь

Если вы хотите отсортировать этот массив JSON объектов по name основе (т.е. отсортировать его по алфавиту), вы можете просто сделать это с помощью метода

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

Войдите в полноэкранный режим Выйти из полноэкранного режима

результат

 [
  { 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' }
]

Войти в полноэкранный режим Выйти из полноэкранного режима

Если вы хотите отсортировать этот массив JSON объектов по active признаку (т.е. отсортировать его по булевому значению), вы можете просто сделать это с помощью команды

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

Войти в полноэкранный режим Выйти из полноэкранного режима

результат

 [
  { 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' }
]

Войти в полноэкранный режим Выйти из полноэкранного режима