Question 266957 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Sort selection of an array of objects

I am trying to sort an array of objects that looks like so –

const originalArray = [
 { name: 'Blue', id: '123', category: 'none' },
 { name: 'Red', id: '145', category: 'none' },
 { name: 'Pink', id: '589', category: 'none' },
 { name: 'Orange', id: '267', category: 'none' },
 { name: 'Green', id: '781', category: 'none' },
]

I have another array which is my ‘sort order’ –

const sortList = [ 'Green', 'Pink', 'Blue' ]

The sort order I have does not include all of the items in the original array. I am trying to do this –

const sortedArray = originalArray.sort(function (a, b) {
    return sortList.indexOf(a.name) - sortList.indexOf(b.name);
});

However when I console.log the sortedArray, it is exactly the same as the original array. I’m not sure what I’m doing wrong. Ideally, I would like the array to be sorted and the ones not included in the sortList should just be at the end. Like so –

const sortedArray = [
 { name: 'Green', id: '781', category: 'none' },
 { name: 'Pink', id: '589', category: 'none' },
 { name: 'Blue', id: '123', category: 'none' },
 { name: 'Red', id: '145', category: 'none' },
 { name: 'Orange', id: '267', category: 'none' },
]
Tags:

3

Answers


  1. 0

    If an item is not found -1 is returned, you have to handle that case

    const originalArray = [
 { name: 'Blue', id: '123', category: 'none' },
 { name: 'Red', id: '145', category: 'none' },
 { name: 'Pink', id: '589', category: 'none' },
 { name: 'Orange', id: '267', category: 'none' },
 { name: 'Green', id: '781', category: 'none' },
]

const sortList = [ 'Green', 'Pink', 'Blue' ]


const sortedArray = originalArray.sort(function (a, b) {
  const aIndex = sortList.indexOf(a.name)
  if (aIndex < 0) return 1
  const bIndex = sortList.indexOf(b.name)
  if (bIndex < 0) return -1
  return aIndex - bIndex
});

console.log(sortedArray)
    Login or Signup to reply.
  2. 0 
    const originalArray = [
    { name: 'Blue', id: '123', category: 'none' },
    { name: 'Red', id: '145', category: 'none' },
    { name: 'Pink', id: '589', category: 'none' },
    { name: 'Orange', id: '267', category: 'none' },
    { name: 'Green', id: '781', category: 'none' },
];
const sortList = ['Green', 'Pink', 'Blue'];

// Separate the items in originalArray into two arrays
const inSortList = [];
const notInSortList = [];

originalArray.forEach(item => {
    if (sortList.includes(item.name)) {
        inSortList.push(item);
    } else {
        notInSortList.push(item);
    }
});

inSortList.sort((a, b) => sortList.indexOf(a.name) - sortList.indexOf(b.name));
const sortedArray1 = [...inSortList, ...notInSortList];
console.log(sortedArray1);

    The above code first separates the items into two arrays, inSortList and notInSortList. Then, it sorts inSortList based on the order defined in sortList and finally concatenates the two arrays to get the desired sorted result.

    Login or Signup to reply.
  3. 0

    Your original code worked, but it put the unknown values first (red and orange).
    I modified your code a bit and it now works:

    const originalArray = [
  { name: 'Blue', id: '123', category: 'none' },
  { name: 'Red', id: '145', category: 'none' },
  { name: 'Pink', id: '589', category: 'none' },
  { name: 'Orange', id: '267', category: 'none' },
  { name: 'Green', id: '781', category: 'none' },
];

const sortList = ['Green', 'Pink', 'Blue'];

const sortedArray = originalArray.sort(function (a, b) {
  const aIndex = sortList.indexOf(a.name);
  const bIndex = sortList.indexOf(b.name);

  if (aIndex === bIndex) return 0;
  else if (aIndex === -1) return 1;
  else if (bIndex === -1) return -1;

  return aIndex - bIndex;
});

sortedArray.forEach((value) => {
  console.log(value.name);
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search