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.
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);Array#reduce, iterate over data to save element-index in a MapArray#sort, sort arr by the value of each element in the above Mapconst 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']) );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)