Unshifting values in a JavaScript array only if they exist in another array

Question

Unshifting values in a JavaScript array only if they exist in another array

I have two arrays of objects - one containing selected data and the other containing general data that needs to be displayed

General data for display

const arr = [
  {
    id: "1",
    name: "Skoda - Auto"
  },
  {
    id: "2",
    name: "BMW - Auto"
  },
  {
    id: "3",
    name: "Mustang"
  },
  {
    id: "2",
    name: "Ferrari"
  },
  {
    id: "1",
    name: "Ford"
  }
];

selectedValues 

const selectedArr = [
  {
    id: "1",
    name: "something - 1"
  },
 {
    id: "3",
    name: "something - 1"
  }
]

I need to rearrange the general data array based on the selected values array. The goal is to prioritize the items in the general array that match the ids in the selected array and move them to the top. Expected Output:

const arr = [
  {
    id: "1",
    name: "Skoda - Auto"
  },
  {
    id: "1",
    name: "Ford"
  },
  {
    id: "3",
    name: "Mustang"
  },
  {
    id: "2",
    name: "BMW - Auto"
  },
  {
    id: "2",
    name: "Ferrari"
  },
];

There may be multiple values with the same id, which should all be moved to the top if they exist in the selected array. I am not sure how to achieve this, so any help would be greatly appreciated.

javascript typescript javascript-objects

Answer 1

Answer №1

To achieve this, you can create a mapping of indices for each ID in the sorting array:

const selectedArr = [
    {
        id: "1",
        name: "item - 1"
    },
    {
        id: "3",
        name: "item - 2"
    }
]

const sortMap = new Map(selectedArr.map(({ id }, index) => [id, index]));

Then, utilize this map in the standard sort function by creating a copy of the array using [...arr] to avoid mutating the original array. Items not found in the sortMap will be given a high index to place them at the end...

const sortedArray = [...arr].sort(
    (itemA, itemB) => (sortMap.get(itemA.id) ?? 10000000) - (sortMap.get(itemB.id) ?? 10000000)
);

Playground Link

const arr = [{
    id: "1",
    name: "Toyota - Car"
  },
  {
    id: "2",
    name: "Honda - Car"
  },
  {
    id: "3",
    name: "Chevrolet"
  },
  {
    id: "2",
    name: "Tesla"
  },
  {
    id: "1",
    name: "Hyundai"
  }
];

const selectedArr = [{
    id: "1",
    name: "something - 1"
  },
  {
    id: "3",
    name: "something - 1"
  }
]

const sortMap = new Map(selectedArr.map(({
  id
}, idx) => [id, idx]));

const sortedArray = [...arr].sort((a, b) => (sortMap.get(a.id) ?? 10000000) - (sortMap.get(b.id) ?? 10000000));

console.log(sortedArray)

Answer 2

To achieve this, you can create a mapping of indices for each ID in the sorting array:

const selectedArr = [
    {
        id: "1",
        name: "item - 1"
    },
    {
        id: "3",
        name: "item - 2"
    }
]

const sortMap = new Map(selectedArr.map(({ id }, index) => [id, index]));

Then, utilize this map in the standard sort function by creating a copy of the array using [...arr] to avoid mutating the original array. Items not found in the sortMap will be given a high index to place them at the end...

const sortedArray = [...arr].sort(
    (itemA, itemB) => (sortMap.get(itemA.id) ?? 10000000) - (sortMap.get(itemB.id) ?? 10000000)
);

Playground Link

const arr = [{
    id: "1",
    name: "Toyota - Car"
  },
  {
    id: "2",
    name: "Honda - Car"
  },
  {
    id: "3",
    name: "Chevrolet"
  },
  {
    id: "2",
    name: "Tesla"
  },
  {
    id: "1",
    name: "Hyundai"
  }
];

const selectedArr = [{
    id: "1",
    name: "something - 1"
  },
  {
    id: "3",
    name: "something - 1"
  }
]

const sortMap = new Map(selectedArr.map(({
  id
}, idx) => [id, idx]));

const sortedArray = [...arr].sort((a, b) => (sortMap.get(a.id) ?? 10000000) - (sortMap.get(b.id) ?? 10000000));

console.log(sortedArray)

Answer 3

Answer №2

An alternative approach, albeit not the most efficient one, involves filtering the array twice - once to extract the selected elements and another time to gather the non-selected ones. These two filtered arrays are then concatenated together. The code snippet below illustrates this process.

const selected = [4, 8, 3];
const fullArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const sorted = fullArray.filter((e) => selected.includes(e))
.concat(fullArray.filter((e) => !selected.includes(e)));

console.log(sorted);

Answer 4

An alternative approach, albeit not the most efficient one, involves filtering the array twice - once to extract the selected elements and another time to gather the non-selected ones. These two filtered arrays are then concatenated together. The code snippet below illustrates this process.

const selected = [4, 8, 3];
const fullArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const sorted = fullArray.filter((e) => selected.includes(e))
.concat(fullArray.filter((e) => !selected.includes(e)));

console.log(sorted);

Unshifting values in a JavaScript array only if they exist in another array

Answer №1

Answer №2

Similar questions

Using Reactjs to Send Emails

Acquiring an icon of a program using its handle

Choose a specific <div> element from an external page using Ajax/PHP

Maintain the visibility of the jQuery dropdown menu even when navigating to a different page within the

A guide to assigning multiple classes to an element in Vue.js depending on the props!

Converting Large XLSX File (over 600MB) to CSV Using Node.js

"Using Bootstrap's toast feature repositions every element on the

What is the method to incorporate type hints for my unique global Vue directives?

Reload the text content of a locally hosted webpage within an iframe at regular intervals

Utilizing Vue CLI plugin to dynamically pass JS variables as props

When utilizing the `express.static(__dirname)` function in Node.js with Express, the visitor may be directed to an incorrect HTML page

An issue has occurred where all parameters for the DataService in the D:/appangular/src/app/services/data.service.ts file cannot be resolved: (?, [object Object])

Initiate an "execute.document" command directly from the address bar

Encountered a 404 error while utilizing the Java - Angular web service

What is the correct data type for the vuex store that is passed to the vuex plugin when it is being initialized?

An issue is preventing the Angular 2+ http service from making the requested call to the server

Send back alternate HTML content if the request is not made via AJAX

Do these two JavaScript statements behave the same under the principles of functional programming in a React environment?

The code is triggering IE 8 to switch to compatibility mode resembling IE7

Record modified fields using Angular Reactive Forms and store them in a list