Rearrange array with new order using javascript

Question

I have an array

const arr = [
   {label: 'a', width: 200},
   {label: 'b', width: 200},
   {label: 'c', width: 200},
   {label: 'd', width: 200},
   {label: 'e', width: 200}
];

given another array

const data = ['d', 'e', 'a', 'c', 'b'];

It need's to re-arrange first array based on the new data.

What function should I use in javascript?

Edit: Thank you for very interesting comments. But to make it more complicated, let's assume that data could also be not the full list of the first array.

const data = ['a', 'c'];

and it still should outcome the first array where first two elements are a & c, and remaining ones are b, d, e. Finished array should be in a list of a, c, b, d, e.

There are several possibilities. You could use `data.map` to map each letter to the respective object of `arr`. You could assign indexes to your objects in `arr` and then use `arr.sort` to sort by that index. ... — derpirscher, Oct 17 '21 at 16:28

score 1 · Answer 1 · answered Oct 17 '21 at 16:26

const arr = [
  { label: "a", width: 200 },
  { label: "b", width: 200 },
  { label: "c", width: 200 },
  { label: "d", width: 200 },
  { label: "e", width: 200 }
];

const data = ["d", "e", "a", "c", "b"];


const updatedArray = data.map((item) => arr.find((t) => t.label === item));
console.log(updatedArray);

Majed Badawi · Accepted Answer · 2021-10-17T17:17:02.360

Using Array#reduce, iterate over data to save element-index in a Map
Using Array#sort, sort arr by the value of each element in the above Map

const sort = (arr = [], data = []) => {
  const indicesMap = data.reduce((map, e, i) => map.set(e, i), new Map);
  return [...arr].sort(({ label: a}, { label: b }) => {
    const indexA = indicesMap.get(a), indexB = indicesMap.get(b);
    return (indexA === undefined || indexB === undefined) 
      ? isNaN(indexA) - isNaN(indexB)
      : indexA - indexB;
  });
}

const arr = [ {label: 'a', width: 200}, {label: 'b', width: 200}, {label: 'c', width: 200}, {label: 'd', width: 200}, {label: 'e', width: 200} ];
console.log( sort(arr, ['d', 'e']) );
console.log( sort(arr, ['a', 'd']) );
console.log( sort(arr, ['d', 'e', 'a', 'c', 'b']) );

score 1 · Answer 3 · answered Oct 17 '21 at 16:29

simply :

const arr = 
  [ { label: 'a', width: 200} 
  , { label: 'b', width: 200} 
  , { label: 'c', width: 200} 
  , { label: 'd', width: 200} 
  , { label: 'e', width: 200} 
  ] 
const data = ['d', 'e', 'a', 'c', 'b']

arr.sort((a, b) => data.indexOf(a.label) - data.indexOf(b.label))

console.log(arr)

score 1 · Answer 4 · answered Oct 17 '21 at 16:44

1

To solve that, use map() and find() methods like that:

const sorted = data.map(element =>  arr.find(obj => obj.label === element))

answered Oct 17 '21 at 16:44

Elis Joaquim

61
4

score 0 · Answer 5 · answered Oct 17 '21 at 16:31

here's a short solution using sort

const arr = [
   {label: 'a', width: 200},
   {label: 'b', width: 200},
   {label: 'c', width: 200},
   {label: 'd', width: 200},
   {label: 'e', width: 200}
];
const data = ['d', 'e', 'a', 'c', 'b'];

const sorted = arr.sort(function(a, b){  
  return data.indexOf(a.label) - data.indexOf(b.label);
});

console.log(sorted)

score 0 · Answer 6 · answered Oct 17 '21 at 18:01

You can take the order of the sorted array as weightage and sort the array.

const arr = [
   {label: 'a', width: 200},
   {label: 'b', width: 200},
   {label: 'c', width: 200},
   {label: 'd', width: 200},
   {label: 'e', width: 200}
];

const sortOrder = ['d', 'e', 'a', 'c', 'b'];


arr.sort((x, y) => sortOrder.indexOf(x.label) - sortOrder.indexOf(y.label))

console.log(arr)

Rearrange array with new order using javascript

6 Answers6