Arrange objects in an array according to the order specified in another array

Question

Arrange objects in an array according to the order specified in another array

Here is my array of car makes:

const makes = [
{id: "4", name: "Audi"},
{id: "5", name: "Bmw"},
{id: "6", name: "Porsche"},
{id: "31", name: "Seat"},
{id: "32", name: "Skoda"},
{id: "36", name: "Toyota"},
{id: "38", name: "Volkswagen"}
]

Now, I want to organize this array based on another list:

const preferred_makes = ['Volkswagen', 'Audi'];

This is how I currently approach it:

const preferred_makes = ['Volkswagen', 'Audi'];

const makes = [
{id: "4", name: "Audi"},
{id: "5", name: "Bmw"},
{id: "6", name: "Porsche"},
{id: "31", name: "Seat"},
{id: "32", name: "Skoda"},
{id: "36", name: "Toyota"},
{id: "38", name: "Volkswagen"}
]

const mainMakes = []
const otherMakes = []

makes.map(make => _.includes(preferred_makes, make.name) ? mainMakes.push(make) : otherMakes.push(make))

console.log(mainMakes)
console.log(otherMakes)

However, I'm wondering if there's a more efficient method. Is there a way to rearrange the makes array so that the elements from preferred_makes come first?

You can view the fiddle here.

javascript arrays object lodash

Answer 1

Answer №1

If you need to sort an array with a custom comparison function, the array.sort() method in JavaScript can help you achieve that.

const favorite_brands = ['Nike', 'Adidas'];

const brands = [
  {id: "1", name: "Adidas"},
  {id: "2", name: "Puma"},
  {id: "3", name: "Reebok"},
  {id: "4", name: "Nike"},
  {id: "5", name: "Under Armour"}
]

const sortedBrands = brands.slice().sort((x, y) => {
  // Convert true and false to 1 and 0
  const xFavorite = new Number(favorite_brands.includes(x.name))
  const yFavorite = new Number(favorite_brands.includes(y.name))
  
  // Return 1, 0, or -1
  return yFavorite - xFavorite
})

console.log(sortedBrands)

Answer 2

If you need to sort an array with a custom comparison function, the array.sort() method in JavaScript can help you achieve that.

const favorite_brands = ['Nike', 'Adidas'];

const brands = [
  {id: "1", name: "Adidas"},
  {id: "2", name: "Puma"},
  {id: "3", name: "Reebok"},
  {id: "4", name: "Nike"},
  {id: "5", name: "Under Armour"}
]

const sortedBrands = brands.slice().sort((x, y) => {
  // Convert true and false to 1 and 0
  const xFavorite = new Number(favorite_brands.includes(x.name))
  const yFavorite = new Number(favorite_brands.includes(y.name))
  
  // Return 1, 0, or -1
  return yFavorite - xFavorite
})

console.log(sortedBrands)

Answer 3

Answer №2

To organize a list based on preferred values, create an object with incremented indices for specified names and set a default value of Infinity for names not found. Then, sort the array by comparing the delta of the values.

var preferred_makes = ['Volkswagen', 'Audi'],
    preferred = preferred_makes.reduce((o, k, i) => (o[k] = i + 1, o), {});
    array = [{ id: "4", name: "Audi" }, { id: "5", name: "Bmw" }, { id: "6", name: "Porsche" }, { id: "31", name: "Seat" }, { id: "32", name: "Skoda" }, { id: "36", name: "Toyota" }, { id: "38", name: "Volkswagen" }];

array.sort((a, b) => (preferred[a.name] || Infinity) - (preferred[b.name] || Infinity));

console.log(array);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

To organize a list based on preferred values, create an object with incremented indices for specified names and set a default value of Infinity for names not found. Then, sort the array by comparing the delta of the values.

var preferred_makes = ['Volkswagen', 'Audi'],
    preferred = preferred_makes.reduce((o, k, i) => (o[k] = i + 1, o), {});
    array = [{ id: "4", name: "Audi" }, { id: "5", name: "Bmw" }, { id: "6", name: "Porsche" }, { id: "31", name: "Seat" }, { id: "32", name: "Skoda" }, { id: "36", name: "Toyota" }, { id: "38", name: "Volkswagen" }];

array.sort((a, b) => (preferred[a.name] || Infinity) - (preferred[b.name] || Infinity));

console.log(array);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 5

Answer №3

One way to create two arrays without sorting is by using the reduce method:

const preferred_makes = ['Volkswagen','Audi'];
const makes = [{id:"4",name:"Audi"},{id:"5",name:"Bmw"},{id:"6",name:"Porsche"},{id:"31",name:"Seat"},{id:"32",name:"Skoda"},{id:"36",name:"Toyota"},{id:"38",name:"Volkswagen"}];

const [mainMakes, otherMakes] = makes.reduce(([a, b], { id, name }) => ((preferred_makes.includes(name) ? a : b).push({ id, name }), [a, b]), [[], []]);

console.log(mainMakes);
console.log(otherMakes);

.as-console-wrapper { max-height: 100% !important; top: auto; }

For improved performance, you could use Set.prototype.has instead of includes:

const preferred_makes = new Set(['Volkswagen','Audi']);
const makes = [{id:"4",name:"Audi"},{id:"5",name:"Bmw"},{id:"6",name:"Porsche"},{id:"31",name:"Seat"},{id:"32",name:"Skoda"},{id:"36",name:"Toyota"},{id:"38",name:"Volkswagen"}];

const [mainMakes, otherMakes] = makes.reduce(([a, b], { id, name }) => ((preferred_makes.has(name) ? a : b).push({ id, name }), [a, b]), [[], []]);

console.log(mainMakes);
console.log(otherMakes);

.as-console-wrapper { max-height: 100% !important; top: auto; }

Answer 6

One way to create two arrays without sorting is by using the reduce method:

const preferred_makes = ['Volkswagen','Audi'];
const makes = [{id:"4",name:"Audi"},{id:"5",name:"Bmw"},{id:"6",name:"Porsche"},{id:"31",name:"Seat"},{id:"32",name:"Skoda"},{id:"36",name:"Toyota"},{id:"38",name:"Volkswagen"}];

const [mainMakes, otherMakes] = makes.reduce(([a, b], { id, name }) => ((preferred_makes.includes(name) ? a : b).push({ id, name }), [a, b]), [[], []]);

console.log(mainMakes);
console.log(otherMakes);

.as-console-wrapper { max-height: 100% !important; top: auto; }

For improved performance, you could use Set.prototype.has instead of includes:

const preferred_makes = new Set(['Volkswagen','Audi']);
const makes = [{id:"4",name:"Audi"},{id:"5",name:"Bmw"},{id:"6",name:"Porsche"},{id:"31",name:"Seat"},{id:"32",name:"Skoda"},{id:"36",name:"Toyota"},{id:"38",name:"Volkswagen"}];

const [mainMakes, otherMakes] = makes.reduce(([a, b], { id, name }) => ((preferred_makes.has(name) ? a : b).push({ id, name }), [a, b]), [[], []]);

console.log(mainMakes);
console.log(otherMakes);

.as-console-wrapper { max-height: 100% !important; top: auto; }

Answer 7

Answer №4

Utilizing lodash allows you to create a mapping of the original index based on the car's make (indexByMake) by using _.invert() to generate an object containing

{ [car make]: original array index }

, then converting the values back to numbers.

Employing _.orderBy() facilitates sorting the array, with the values from indexByMake arranged according to the name:

const preferred_makes = ['Volkswagen', 'Audi'];
const array = [{ id: "4", name: "Audi" }, { id: "5", name: "Bmw" }, { id: "6", name: "Porsche" }, { id: "31", name: "Seat" }, { id: "32", name: "Skoda" }, { id: "36", name: "Toyota" }, { id: "38", name: "Volkswagen" }];

const indexByMake = _.mapValues(_.invert(preferred_makes), Number);

const result = _.sortBy(array, ({ name }) => indexByMake[name]);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

Answer 8

Utilizing lodash allows you to create a mapping of the original index based on the car's make (indexByMake) by using _.invert() to generate an object containing

{ [car make]: original array index }

, then converting the values back to numbers.

Employing _.orderBy() facilitates sorting the array, with the values from indexByMake arranged according to the name:

const preferred_makes = ['Volkswagen', 'Audi'];
const array = [{ id: "4", name: "Audi" }, { id: "5", name: "Bmw" }, { id: "6", name: "Porsche" }, { id: "31", name: "Seat" }, { id: "32", name: "Skoda" }, { id: "36", name: "Toyota" }, { id: "38", name: "Volkswagen" }];

const indexByMake = _.mapValues(_.invert(preferred_makes), Number);

const result = _.sortBy(array, ({ name }) => indexByMake[name]);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

Answer 9

Answer №5

If the index is present, you can sort by using the Array.indexOf, otherwise resort to utilizing String.localeCompare. In this scenario, lodash isn't necessary:

const brands = [ {id: "4", name: "Audi"}, {id: "6", name: "Porsche"}, {id: "31", name: "Seat"}, {id: "32", name: "Skoda"}, {id: "5", name: "BMW"}, {id: "36", name: "Toyota"}, {id: "38", name: "Volkswagen"} ] 
const order = ['Volkswagen', 'Audi'];

let sortedResult = brands.sort((a,b) => {
  let index = order.indexOf(a.name)
  return index < 0 ? a.name.localeCompare(b.name) : order.indexOf(b.name) - index
})

console.log(sortedResult)

Answer 10

If the index is present, you can sort by using the Array.indexOf, otherwise resort to utilizing String.localeCompare. In this scenario, lodash isn't necessary:

const brands = [ {id: "4", name: "Audi"}, {id: "6", name: "Porsche"}, {id: "31", name: "Seat"}, {id: "32", name: "Skoda"}, {id: "5", name: "BMW"}, {id: "36", name: "Toyota"}, {id: "38", name: "Volkswagen"} ] 
const order = ['Volkswagen', 'Audi'];

let sortedResult = brands.sort((a,b) => {
  let index = order.indexOf(a.name)
  return index < 0 ? a.name.localeCompare(b.name) : order.indexOf(b.name) - index
})

console.log(sortedResult)

Arrange objects in an array according to the order specified in another array

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to refresh a page during an ajax call while also resetting all form fields?

Trimming white spaces of array values in PHP can be achieved by using the array_map

Execute a zoom out action by pressing the (Ctrl) and (-) keys simultaneously in Javascript

Is there a way to adjust user privileges within a MenuItem?

The ENOENT error code 4058 occurred while attempting to create a new react application using

Displaying the chosen array in a Material UI Table within a React application does not show the desired checkboxes

What would the equivalent Javascript implementation look like for this Python code that decodes a hex string and then encodes it to base64?

The Power of ReactJS Spread Syntax

Unforeseen outcomes arise when toggling expansion in JavaScript

The most efficient method for handling a vast amount of data in NodeJS

Using Kendo TabStrip to dynamically include HTML files as tabs

Unable to retrieve the parent element using jQuery

Is the default behavior of Ctrl + C affected by catching SIGINT in NodeJS?

Utilizing a child component in React to trigger a function on its sibling component

Can you explain the distinction between locating an element by its class name versus locating it by its CSS selector?

EJS failing to render HTML within script tags

Receive information from a form and store it in an array

Encountering invalid parameters while attempting to utilize the track.scrobble service from the Last.Fm API in a Node.js application

Vue alerts and pop-ups will only show once

AngularJs Controller with explicit inline annotation