Order an array of objects based on the values of another array of objects

Question

Let's say I have an array of products:

const Products = [
  { id: 123, productName: "Portable Tabletop Game", quantity: 12 },
  { id: 456, productName: "Gift Card", quantity: 23 },
  { id: 789, productName: "Box of Chocolates", quantity: 8 },
  { id: 012, productName: "Gift Box", quantity: 4 },
  { id: 098, productName: "Balloons", quantity: 15 },
  { id: 765, productName: "Music Box", quantity: 30 }
];

and I have another, smaller array where I store the order of the products on my page:

const orderItems = [
  { order: 1, productId: 021 },
  { order: 2, productId: 765 }, 
  { order: 3, productId: 123 }
];

and I want my Products array items to be ordered like the orderItems array defines, like so:

const Products = [
  { id: 012, productName: "Gift Box", quantity: 4 },
  { id: 765, productName: "Music Box", quantity: 30 },
  { id: 123, productName: "Portable Tabletop Game", quantity: 12 },
  { id: 456, productName: "Gift Card", quantity: 23 },
  { id: 789, productName: "Box of Chocolates", quantity: 8 },
  { id: 098, productName: "Balloons", quantity: 15 }
];

and I want the products which do not have a corresponding orderItem to be at the end of the array.

Is there any way to do this?

There appears to be a typo in the orderItems array; based on your expected ordering, the first item's productId should be 012, not 021. Also JavaScript numbers with leading zeros are interpreted in octal rather than decimal, so you may want to use strings for ids instead. I addressed both of these in a section of my answer — agilgur5
– agilgur5, Commented Aug 27 at 0:53

Sanjeev_gupta2812 · Accepted Answer · 2022-03-23 04:21:52Z

0

Well you can do it using Array.filter() and Array.some() method simply. Array.filter() method will return an array of the products matching with the item in orderItems whereas Array.some() method will simple check or match if element exists.

const Products = [
{ id: 123, productName: "Portable Tabletop Game", quantity: 12 },
{ id: 456, productName: "Gift Card", quantity: 23 },
{ id: 789, productName: "Box of Chocolates", quantity: 8 },
{ id: 012, productName: "Gift Box", quantity: 4 },
{ id: 098, productName: "Balloons", quantity: 15 },
{ id: 765, productName: "Music Box", quantity: 30 }];const Products = [
{ id: 123, productName: "Portable Tabletop Game", quantity: 12 },
{ id: 456, productName: "Gift Card", quantity: 23 },
{ id: 789, productName: "Box of Chocolates", quantity: 8 },
{ id: 012, productName: "Gift Box", quantity: 4 },
{ id: 098, productName: "Balloons", quantity: 15 },
{ id: 765, productName: "Music Box", quantity: 30 }];

const orderItems = [
{ order: 1, productId: 012},
{ order: 2, productId: 765 }, 
{ order: 3, productId: 123 }];
let OrderItem = [];
OrderItem = Products.filter((item,key)=>{
    return orderItems[key] && orderItems[key]['productId'] && Products.some((ele)=> ele.id === orderItems[key]['productId'])
    console.log(OrderItem)

})

answered Mar 23, 2022 at 4:21

Sanjeev_gupta2812

2544 silver badges20 bronze badges

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

3 Comments

Sanjeev_gupta2812 Over a year ago

Please let me know if this works for you.Thanks Give it a thumbs up. :)

Daniel Corona Over a year ago

Well, it certanly does filter the products that appear in the orderItems array...but it doesn't order them according to their value, if you can add something to order the results, I will be thankful!

Daniel Corona Over a year ago

feel free to edit your answer

agilgur5 · Accepted Answer · 2025-08-27 04:51:45Z

Since the previous answer did not quite address the question, here's a full example of how to order one array based on another array.

To more easily retrieve the order of a product given its productId, we can convert the orderItems array into an object mapping from productId to order¹:

const orderItems = [
  { order: 1, productId: "012" },
  { order: 2, productId: "765" }, 
  { order: 3, productId: "123" }
]

// create a mapping from productId to order
const orderById = {}
orderItems.forEach(item => {
  orderById[item.productId] = item.order
})

We can then use the Array sort method to order the products array with a comparator function:

const products = [
  { id: "123", productName: "Portable Tabletop Game", quantity: 12 },
  { id: "456", productName: "Gift Card", quantity: 23 },
  { id: "789", productName: "Box of Chocolates", quantity: 8 },
  { id: "012", productName: "Gift Box", quantity: 4 },
  { id: "098", productName: "Balloons", quantity: 15 },
  { id: "765", productName: "Music Box", quantity: 30 }
]

// sort according to the mapping
products.sort((a, b) => {
  // check for existence of corresponding orderItem
  if (!(a.id in orderById) && !(b.id in orderById)) {
    // if both don't exist, their order is equal
    return 0
  }
  if (!(a.id in orderById)) {
    // if only a does not not exist, put it after b
    return 1
  }
  if (!(b.id in orderById)) {
    // if only b does not exist, put it after a
    return -1 
  }

  // if both exist, put them in ascending order
  return orderById[a.id] - orderById[b.id]
})

Putting it all together into a runnable example:

// initialize data
const orderItems = [
  { order: 1, productId: "012" },
  { order: 2, productId: "765" }, 
  { order: 3, productId: "123" }
]
const products = [
  { id: "123", productName: "Portable Tabletop Game", quantity: 12 },
  { id: "456", productName: "Gift Card", quantity: 23 },
  { id: "789", productName: "Box of Chocolates", quantity: 8 },
  { id: "012", productName: "Gift Box", quantity: 4 },
  { id: "098", productName: "Balloons", quantity: 15 },
  { id: "765", productName: "Music Box", quantity: 30 }
]

// create a mapping from productId to order
const orderById = {}
orderItems.forEach(item => {
  orderById[item.productId] = item.order
})
console.log("orderById:", orderById)

// sort according to the mapping
products.sort((a, b) => {
  // check for existence of corresponding orderItem
  if (!(a.id in orderById) && !(b.id in orderById)) {
    // if both don't exist, their order is equal
    return 0
  }
  if (!(a.id in orderById)) {
    // if only a does not not exist, put it after b
    return 1
  }
  if (!(b.id in orderById)) {
    // if only b does not exist, put it after a
    return -1 
  }

  // if both exist, put them in ascending order
  return orderById[a.id] - orderById[b.id]
})
console.log("sorted products:", products)

Data Cleaning

Note that I took the liberty to fix two issues in your initial data:

Your orderItems array has a typo; the first item has a productId of 021, but it seems like you meant for that to be 012 based on the expected ordering.
The ids are currently numbers and some of them have a leading zero. In JavaScript, some numbers with a leading zero are interpreted in octal rather than decimal, and this syntax is forbidden in modern strict mode. To fix this, I converted all the ids to strings.

^{1. You could also search the orderItems array each time instead of doing this conversion as a less computationally efficient option}

Collectives™ on Stack Overflow

Order an array of objects based on the values of another array of objects

2 Answers 2

3 Comments

Data Cleaning

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Data Cleaning

Comments

Your Answer

Sign up or log in

Post as a guest

Related