Reorganize array elements in a different sequence utilizing JavaScript

Question

Reorganize array elements in a different sequence utilizing JavaScript

I possess an array

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

provided with another array

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

An arrangement is needed for the first array based on the new data.

Which javascript function should be used for this purpose?

Edit: Appreciating the insightful comments. To add complexity, let's consider that data might not necessarily encompass the entire initial array.

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

The resultant array is expected to have 'a' and 'c' as the first two elements, followed by 'b', 'd', and 'e'. The final array should appear in the order of a, c, b, d, e.

javascript arrays reorderlist

Answer 1

Answer №1

Utilize the Array#reduce method to loop through the `data` array and store the element-index in a Map
With the help of Array#sort, organize the `arr` array based on the value of each element in the previously created 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']) );

Answer 2

Utilize the Array#reduce method to loop through the `data` array and store the element-index in a Map
With the help of Array#sort, organize the `arr` array based on the value of each element in the previously created 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']) );

Answer 3

Answer №2

let list = [
  { name: "apple", quantity: 10 },
  { name: "banana", quantity: 5 },
  { name: "cherry", quantity: 20 },
  { name: "date", quantity: 15 },
  { name: "eggplant", quantity: 8 }
];

let selectedItems = ["banana", "apple", "date"];

let updatedList = selectedItems.map((item) => list.find((fruit) => fruit.name === item));
console.log(updatedList);

Answer 4

let list = [
  { name: "apple", quantity: 10 },
  { name: "banana", quantity: 5 },
  { name: "cherry", quantity: 20 },
  { name: "date", quantity: 15 },
  { name: "eggplant", quantity: 8 }
];

let selectedItems = ["banana", "apple", "date"];

let updatedList = selectedItems.map((item) => list.find((fruit) => fruit.name === item));
console.log(updatedList);

Answer 5

Answer №3

Put simply:

const list = [
    { name: 'apple', quantity: 10 },
    { name: 'banana', quantity: 5 },
    { name: 'kiwi', quantity: 8 },
    { name: 'orange', quantity: 15 },
    { name: 'grapes', quantity: 3 }
]

const order = ['orange', 'banana', 'grapes', 'kiwi', 'apple']

list.sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name))

console.log(list)

Answer 6

Put simply:

const list = [
    { name: 'apple', quantity: 10 },
    { name: 'banana', quantity: 5 },
    { name: 'kiwi', quantity: 8 },
    { name: 'orange', quantity: 15 },
    { name: 'grapes', quantity: 3 }
]

const order = ['orange', 'banana', 'grapes', 'kiwi', 'apple']

list.sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name))

console.log(list)

Answer 7

Answer №4

In order to find a solution, apply the map() and find() functions as shown below:

const result = values.map(item =>  list.find(object => object.name === item))

Answer 8

In order to find a solution, apply the map() and find() functions as shown below:

const result = values.map(item =>  list.find(object => object.name === item))

Answer 9

Answer №5

Here is a concise solution utilizing the sort method:

const arr = [
   {label: 'apple', quantity: 10},
   {label: 'banana', quantity: 5},
   {label: 'orange', quantity: 8},
   {label: 'grapes', quantity: 3},
   {label: 'kiwi', quantity: 6}
];
const order = ['orange', 'apple', 'kiwi', 'banana', 'grapes'];

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

console.log(sortedArray)

Answer 10

Here is a concise solution utilizing the sort method:

const arr = [
   {label: 'apple', quantity: 10},
   {label: 'banana', quantity: 5},
   {label: 'orange', quantity: 8},
   {label: 'grapes', quantity: 3},
   {label: 'kiwi', quantity: 6}
];
const order = ['orange', 'apple', 'kiwi', 'banana', 'grapes'];

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

console.log(sortedArray)

Answer 11

Answer №6

One approach is to assign weights based on the order of elements in a sorted array.

const items = [
   {name: 'apple', quantity: 10},
   {name: 'banana', quantity: 20},
   {name: 'cherry', quantity: 5},
   {name: 'date', quantity: 15},
   {name: 'kiwi', quantity: 8}
];

const priorityOrder = ['date', 'banana', 'apple', 'kiwi', 'cherry'];


items.sort((a, b) => priorityOrder.indexOf(a.name) - priorityOrder.indexOf(b.name))

console.log(items)

Answer 12

One approach is to assign weights based on the order of elements in a sorted array.

const items = [
   {name: 'apple', quantity: 10},
   {name: 'banana', quantity: 20},
   {name: 'cherry', quantity: 5},
   {name: 'date', quantity: 15},
   {name: 'kiwi', quantity: 8}
];

const priorityOrder = ['date', 'banana', 'apple', 'kiwi', 'cherry'];


items.sort((a, b) => priorityOrder.indexOf(a.name) - priorityOrder.indexOf(b.name))

console.log(items)

Reorganize array elements in a different sequence utilizing JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Supply mandatory argument along with varying arguments to the function

Struggling with inputting text in an AngularJS application

The active link for pagination in CodeIgniter is malfunctioning

A guide on invoking a web method from an aspx.vb page in VB.net

Is there a way to retrieve the precise floating-point width of an element?

Struggling to make React respond to button clicks without resorting to using addEventListener

Error message: Laravel unable to locate requested page

Using Typescript, you can specify an array of type <T> within an object

I have to display a pop-up message box after selecting an option from a dropdown menu that fulfills a set of conditions

Create a visual layout showcasing a unique combination of images and text using div elements in

Boost the font size on Bootstrap UI Angular timepicker for a better user experience

Prevented a frame from "https://googleads.g.doubleclick.net" from accessing another frame

Encountering an issue when attempting to extend a module in nodejs

What is the best way to calculate the number of days between today's date and the end of the current month using Moment.js?

Blurry text and icons in Bootstrap 3

It appears that the crackling noise is being generated by AudioContext.decodeAudioData

Utilize React to extract a JSON object nested within an array and then implement a dropdown sorting feature for the JSON

Troubles with AJAX comment system validation issues

What is the process of integrating data from the OpenWeatherMap API into the WindowInfo feature of Google Maps?

How can React and Redux ensure that response data is accessible to every component?