JavaScript array unshift if values present in other array

Question

I've two array of objects one selected and other general data which we're displaying

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 want to sort the general data for display based on this selected array. so basically I want to match the id from selectedArr check if this id is present in general array if yes the shuffle the general array so that selected values are at the top of the array O/P

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 are multiple values with same id, I need to unshift those values at the top if it exisits in selected Array. I'm not sure how to achieve such output, hence need some help on this

Does this answer your question? Javascript - sort array based on another array — pilchard
– pilchard, Commented Aug 18, 2023 at 10:47
also Sort array of objects by array of IDs or Sort an array of objects based on another array of ids or How to sort an array of objects in the same order as an id array — pilchard
– pilchard, Commented Aug 18, 2023 at 10:48

spender · Accepted Answer · 2023-08-18 10:44:56Z

0

This can be achieved by indexing your sorting array into a map that gives an index for a given id:

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

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

then using this in the standard sort function (here, I'm taking a copy of the array with [...arr] because sort is in-place and I'm a big fan of avoiding mutation). We give items that are not present in the sortMap a sufficiently large index that they'll go to the bottom of the list...

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

Playground Link

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

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)

edited Aug 18, 2023 at 10:44

answered Aug 18, 2023 at 10:39

spender

121k36 gold badges245 silver badges369 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mitul Panchal Over a year ago

can you plz explain you code, I didn't get it what's that 10000000 value?

spender Over a year ago

@Kriti OK. When we search sortMap for a value, what is returned is the position in the sorted list that we want the item to appear. However, some values are not present in the sortMap (for instance, sortMap.get("2") returns undefined), so in this case we use the null-coalescing operator ?? to substitue the value 10000000 when undefined is encountered. This ensures that items in the source array that are not in the sortMap get sorted to position 10000000 (or the end of the list). To be super-safe, you might choose Number.MAX_VALUE instead.

Mitul Panchal Over a year ago

The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type. - I get this error in vscode

spender Over a year ago

@Kriti Where does that error come from? As can be seen in the typescript playground, the data you supplied and the code I supplied don't exhibit this error.

Mitul Panchal Over a year ago

fixed it const sortedArray = [...arr].sort( (a, b) => +(sortMap.get(a.id) ?? 10000000) - +(sortMap.get(b.id) ?? 10000000) ); github.com/microsoft/TypeScript/issues/5710

Jim Nilsson · Accepted Answer · 2023-08-18 10:38:07Z

0

One not very efficient but easy way to do it is to filter the array twice, creating one array that has the selected elements and one that does not, and then concatenate these two together, like the example below.

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);

answered Aug 18, 2023 at 10:38

Jim Nilsson

8824 silver badges12 bronze badges

2 Comments

StackByMe Over a year ago

Why not a simple sort instead of two filters?

Jim Nilsson Over a year ago

That would also be simple but also less efficient O(n logn) compared to O(n) (assuming the number of elements in selected is negligably small.

Collectives™ on Stack Overflow

JavaScript array unshift if values present in other array

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related