How can I sort an array by another array of objects?

Question

How can I sort an array by string?

const filter = [
 { index: "First" },
 { index: "Second" },
 { index: "Third" }
]
const data = [
 { title: 'Apple', index: "Second" },
 { title: 'Samsung', index: "First" },
 { title: 'BMW', index: "Third" },
 { title: 'Apple', index: "Second" },
 { title: 'Apple', index: "Second" },
 { title: 'Samsung', index: "First" }
]

Expected results:

const data = [
 { title: 'Samsung', index: "First" },
 { title: 'Samsung', index: "First" },
 { title: 'Apple', index: "Second" },
 { title: 'Apple', index: "Second" },
 { title: 'BMW', index: "Third" }
]

How to iterate over two arrays correctly? Do I have to iterate over two arrays to do this? Or is there another way to get the desired result?

Given three inputs - "First", "Second", "Third", if there will be more of these indices?

• Sebastian Simon: It’d be easier if filter was an array of strings instead of an array of objects. Then something like data.sort((a, b) => filter.indexOf(a.index) - filter.indexOf(b.index)) would be possible. But findIndex could be used here as well.

Answer 1

• Using Array#reduce, iterate over filter and save each object's index attribute and its index in the array in a Map
• Using Array#sort, sort data by the values of the index attributes from the above map

const 
 filter = [ { index: "First" }, { index: "Second" }, { index: "Third" } ],
 data = [ { title: 'Apple', index: "Second" }, { title: 'Samsung', index: "First" }, { title: 'BMW', index: "Third" }, { title: 'Apple', index: "Second" }, { title: 'Apple', index: "Second" }, { title: 'Samsung', index: "First" } ];
 
const indexSortMap = filter.reduce((map, { index }, i) => map.set(index, i), new Map);
data.sort(({ index: a }, { index: b }) => indexSortMap.get(a) - indexSortMap.get(b));
console.log(data);

Answer 2

Use Array#sort with custom compareFunction and Array#findIndex with custom callback function

const filter = [ { index: "First",}, {index: "Second",}, {index: "Third",}];
const data = [ { title: 'Apple', index: "Second" }, { title: 'Samsung', index: "First" }, { title: 'BMW', index: "Third" }, { title: 'Apple', index: "Second" }, { title: 'Apple', index: "Second" }, { title: 'Samsung', index: "First" } ];
data.sort((a ,b) => {
 return filter.findIndex(i => i.index === a.index) - filter.findIndex(i => i.index === b.index);
});
console.log(data);

Answer 3

One possible solution (and simple) is by iterating these two arrays. They will be pushed according to the order of the "filter" array:

const sortedArray = []
filter.forEach(fil=> {
 data.forEach(dat=>{
 if(dat.index===fil.index)
 sortedArray.push(dat)
 })
})
console.log(sortedArray)

Answer 4

One approach would be to push the objects to three different arrays, each one for an index and then concatenate the arrays.

var arr1 = [],arr2 = [],arr3 = [], data = [ { title: 'Apple', index: "Second" }, { title: 'Samsung', index: "First" }, { title: 'BMW', index: "Third" }, { title: 'Apple', index: "Second" }, { title: 'Apple', index: "Second" }, { title: 'Samsung', index: "First" } ];
for(d of data) d.index == 'First' ? arr1.push(d) : d.index == 'Second' ? arr2.push(d) : arr3.push(d);
data = [].concat.apply([], [arr1, arr2, arr3]);
console.log(data);