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

Using Javascript to populate textboxes with the value of checkboxes

Issue with Ionic and Angular: Struggling to empty input field

I am looking to utilize the JavaScript YouTube API to seamlessly upload a video from my website directly to YouTube

Issue with html2canvas image download in Firefox

Repeating every 3 to 6 months on later.js commencing from a specified date

Creating a curved edge for a shape in React Native can add a stylish and

determining dimensions of arrays in the C programming language

Tips for setting a default value in an input type file using JavaScript

forming an instance from JSON information

retrieving a map containing the values from an array using the `.includes()`

Is there a way to alphabetically and numerically organize a table in vue.js?

Shifting an element to the right before revealing or concealing it with Jquery Show/Hide

Error: Attempting to access a property of an undefined value (referencing '8') was unsuccessful

Revert the Vue State When Navigating Back in the Browser

Encountering the error "TypeError: Unable to access property 'findAll' of undefined" when using Sequlize

Navigating an Array in Typescript

Eliminate any duplicated items from the array located at the end

Is it possible to set environment variables in Next.js outside of the pages directory?

Navigate through a filtered list of parent items with the use of cursor arrows in AngularJS

Show and conceal columns in HTML with the help of JavaScript