Order an array based on another array using the underscore library in Javascript

Question

Order an array based on another array using the underscore library in Javascript

I'm trying to align the order of two arrays of objects. Here are the arrays:

Array 1:

var firstArray = [
{id: "1", value: 1},
{id: "5", value: 0.5},
{id: "3", value: 0.25},
{id: "4", value: 0.125},
{id: "2", value: 0.0625}
];

Array 2:

var secondArray = [
{id: 1, name: "a"},
{id: 2, name: "b"},
{id: 3, name: "c"},
{id: 4, name: "d"},
{id: 5, name: "e"}
];

Can anyone help me figure out how to sort Array 2 so that it matches the order of Array 1? The desired result should look like this:

Result:

var secondArray = [
{id: 1, name: "a"},
{id: 5, name: "e"},
{id: 3, name: "c"},
{id: 4, name: "d"},
{id: 2, name: "b"}
];

javascript arrays sorting underscore.js

Answer 1

Answer №1

Here is a solution using Underscore/Lodash, as requested by the question title. This piece of code arranges the second array based on the indexes of the corresponding IDs in the first array.

$(function() {
    var firstArray = [
{id: "1", value: 1},
{id: "5", value: 0.5},
{id: "3", value: 0.25},
{id: "4", value: 0.125},
{id: "2", value: 0.0625}
    ];
    var secondArray = [
{id: 1, name: "a"},
{id: 2, name: "b"},
{id: 3, name: "c"},
{id: 4, name: "d"},
{id: 5, name: "e"}
    ];

    var sorted = _.sortBy(secondArray, function(obj) {
return _.findIndex(firstArray, {id: obj.id.toString()});
    });

    console.log(sorted);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

Answer 2

Here is a solution using Underscore/Lodash, as requested by the question title. This piece of code arranges the second array based on the indexes of the corresponding IDs in the first array.

$(function() {
    var firstArray = [
{id: "1", value: 1},
{id: "5", value: 0.5},
{id: "3", value: 0.25},
{id: "4", value: 0.125},
{id: "2", value: 0.0625}
    ];
    var secondArray = [
{id: 1, name: "a"},
{id: 2, name: "b"},
{id: 3, name: "c"},
{id: 4, name: "d"},
{id: 5, name: "e"}
    ];

    var sorted = _.sortBy(secondArray, function(obj) {
return _.findIndex(firstArray, {id: obj.id.toString()});
    });

    console.log(sorted);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

Answer 3

Answer №2

To implement this in plain ES6, you can use a Map to map the index of the given id and then sort it based on the index of firstArray.

However, one challenge is the difference in data types for the id values within the arrays.

var firstArray = [{ id: "1", value: 1 }, { id: "5", value: 0.5 }, { id: "3", value: 0.25 }, { id: "4", value: 0.125 }, { id: "2", value: 0.0625 }],
    secondArray = [{ id: 1, name: "a" }, { id: 2, name: "b" }, { id: 3, name: "c" }, { id: 4, name: "d" }, { id: 5, name: "e" }],
    map = new Map(firstArray.map(({ id }, i) => [+id, i]));

secondArray.sort((a, b) => map.get(a.id) - map.get(b.id));

console.log(secondArray);

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

Answer 4

To implement this in plain ES6, you can use a Map to map the index of the given id and then sort it based on the index of firstArray.

However, one challenge is the difference in data types for the id values within the arrays.

var firstArray = [{ id: "1", value: 1 }, { id: "5", value: 0.5 }, { id: "3", value: 0.25 }, { id: "4", value: 0.125 }, { id: "2", value: 0.0625 }],
    secondArray = [{ id: 1, name: "a" }, { id: 2, name: "b" }, { id: 3, name: "c" }, { id: 4, name: "d" }, { id: 5, name: "e" }],
    map = new Map(firstArray.map(({ id }, i) => [+id, i]));

secondArray.sort((a, b) => map.get(a.id) - map.get(b.id));

console.log(secondArray);

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

Answer 5

Answer №3

Ever Heard of the XY problem?

It seems like your intention is to establish a relationship between the two arrays by index once the second array is sorted. Allow me to propose a different approach for establishing this relation.

const firstArray =
  [ {id: "1", value: 1}
  , {id: "5", value: 0.5}
  , {id: "3", value: 0.25}
  , {id: "4", value: 0.125}
  , {id: "2", value: 0.0625}
  ]

const secondArray =
  [ {id: 1, name: "a"}
  , {id: 2, name: "b"}
  , {id: 3, name: "c"}
  , {id: 4, name: "d"}
  , {id: 5, name: "e"}
  ]

const thirdArray =
  firstArray.map (x =>
    Object.assign (x, secondArray.find (y => y.id == x.id)))
    
console.log (thirdArray)
// [ { id: 1, value: 1, name: 'a' }
// , { id: 5, value: 0.5, name: 'e' }
// , { id: 3, value: 0.25, name: 'c' }
// , { id: 4, value: 0.125, name: 'd' }
// , { id: 2, value: 0.0625, name: 'b' } 
// ]

Answer 6

Ever Heard of the XY problem?

It seems like your intention is to establish a relationship between the two arrays by index once the second array is sorted. Allow me to propose a different approach for establishing this relation.

const firstArray =
  [ {id: "1", value: 1}
  , {id: "5", value: 0.5}
  , {id: "3", value: 0.25}
  , {id: "4", value: 0.125}
  , {id: "2", value: 0.0625}
  ]

const secondArray =
  [ {id: 1, name: "a"}
  , {id: 2, name: "b"}
  , {id: 3, name: "c"}
  , {id: 4, name: "d"}
  , {id: 5, name: "e"}
  ]

const thirdArray =
  firstArray.map (x =>
    Object.assign (x, secondArray.find (y => y.id == x.id)))
    
console.log (thirdArray)
// [ { id: 1, value: 1, name: 'a' }
// , { id: 5, value: 0.5, name: 'e' }
// , { id: 3, value: 0.25, name: 'c' }
// , { id: 4, value: 0.125, name: 'd' }
// , { id: 2, value: 0.0625, name: 'b' } 
// ]

Answer 7

Answer №4

By taking note of the different data types in the arrays (one using String for id and the other using Number), a solution can be achieved using ES6 .map() method along with .find():

var firstArray = [
  {id: "1", value: 1},
  {id: "5", value: 0.5},
  {id: "3", value: 0.25},
  {id: "4", value: 0.125},
  {id: "2", value: 0.0625}
];

var secondArray = [
  {id: 1, name: "a"},
  {id: 2, name: "b"},
  {id: 3, name: "c"},
  {id: 4, name: "d"},
  {id: 5, name: "e"}
];

var result = firstArray.map(item => {
  return {
    id: Number(item.id),
    name: secondArray.find(element => element.id == item.id).name
  }
})

console.log(result)

Answer 8

By taking note of the different data types in the arrays (one using String for id and the other using Number), a solution can be achieved using ES6 .map() method along with .find():

var firstArray = [
  {id: "1", value: 1},
  {id: "5", value: 0.5},
  {id: "3", value: 0.25},
  {id: "4", value: 0.125},
  {id: "2", value: 0.0625}
];

var secondArray = [
  {id: 1, name: "a"},
  {id: 2, name: "b"},
  {id: 3, name: "c"},
  {id: 4, name: "d"},
  {id: 5, name: "e"}
];

var result = firstArray.map(item => {
  return {
    id: Number(item.id),
    name: secondArray.find(element => element.id == item.id).name
  }
})

console.log(result)

Order an array based on another array using the underscore library in Javascript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Obtain the dimensions (width and height) of a collection of images using Angular and TypeScript

Implementing tooltips that require a click instead of hovering

Seeking assistance with formatting output for OpenCPU and igraph

Can a cross-browser extension be developed that integrates with a Python backend for a web application?

Displaying File Name Discrepancies within an Array of Items (Java)

What is the method for extracting a list of properties from an array of objects, excluding any items that contain a particular value?

What could be the reason why I am unable to choose my radio button? What error am I

Having trouble retrieving data from the database when passing input to a mongoose query using an href tag in Node.js

When I attempt to run several promises simultaneously with Promise.All, I encounter an error

Modifying the attribute of an element inside an array

Converting an object with a combination of different index types into a string representation

Dividing an array into three separate groups

Is there a way to set a custom width or make the description responsive?

I am unable to access the properties of an undefined element, specifically the 'size' property in Next.js 13

Is there a way I can replace this for loop with the array.some function?

Creating data representations using classes

Convert numpy C array into a C double* [] and then reverse the process

Exploring the potentials of REST services using the .Net 2.0 framework in conjunction with integrating REST consumption in JavaScript

Updating records in MySQL using jQuery and PHP through an inline method

In Javascript, the function sets a Boolean value to true but unexpectedly returns false