How to restructure data using reduce?

Question

I am getting data from API structured like this:

interface ProductModel {
    prod_id: string,
    brand: string,
    ...
}

interface OrderModel {
    order_id: string,
    prod_id: string,
    ...
}

const data = {
    products: ProductModel[],
    orders: OrderModel[]
}

What I want is to restructure the data to group the orders of a product and the product info in one object:

const expectedStructure = {
    prod_id: string,
    brand: string,
    ...,
    orders: OrderModel[]
}

I suppose that with a reduce it could be done easily, but I don't quite understand how it works. Could someone help me with this example?

Elio Rahi · Accepted Answer · 2022-08-30 09:00:32Z

1

You could just use the spread operator which "flattens" the object's properties.

const expectedStructure = { ...products, orders }

answered Aug 30, 2022 at 9:00

Elio Rahi

1828 bronze badges

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

Comments

Vinod Liyanage · Accepted Answer · 2022-08-30 09:04:44Z

1

const data = {
    products: ProductModel[],
    orders: OrderModel[]
}

const {products, orders} = data;

const expectedStructure = {
   ...products,
   orders,
}

checkout: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

checkout: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

answered Aug 30, 2022 at 9:04

Vinod Liyanage

1,2006 silver badges15 bronze badges

Comments

Sergey Sosunov · Accepted Answer · 2022-08-30 09:54:00Z

0

Reduce can be used but you dont really need it, simple .map with .filter and ... spread operator:

const products = [
  { prod_id: "1", brand: "brand1" },
  { prod_id: "2", brand: "brand1" },
  { prod_id: "3", brand: "brand2" },
  { prod_id: "4", brand: "brand2" },
  { prod_id: "5", brand: "brand3" }
];
const orders = [
  { order_id: "1", prod_id: "1" },
  { order_id: "2", prod_id: "2" },
  { order_id: "3", prod_id: "3" },
  { order_id: "4", prod_id: "3" },
  { order_id: "5", prod_id: "4" }
];

const data = {
  products: products,
  orders: orders
};

function groupData(data) {
  if (!data) return data;
  return data.products.map((p) => ({
    ...p,
    orders: data.orders.filter((x) => x.prod_id === p.prod_id)
  }));
}

console.log(groupData(data));

Adding a little optimization asked in comments using Map class. With that you will only need 1 loop over initial Orders array to build the Map object and then you will have a constant time of element retrieval:

const products = [
  { prod_id: "1", brand: "brand1" },
  { prod_id: "2", brand: "brand1" },
  { prod_id: "3", brand: "brand2" },
  { prod_id: "4", brand: "brand2" },
  { prod_id: "5", brand: "brand3" }
];
const orders = [
  { order_id: "1", prod_id: "1" },
  { order_id: "2", prod_id: "2" },
  { order_id: "3", prod_id: "3" },
  { order_id: "4", prod_id: "3" },
  { order_id: "5", prod_id: "4" }
];

const data = {
  products: products,
  orders: orders
};

function buildMap(data) {
  const res = new Map();
  data.orders.forEach((order) => {
    if (res.has(order.prod_id)) {
      res.get(order.prod_id).push(order);
    } else {
      res.set(order.prod_id, [order]);
    }
  });
  return res;
}

function groupData(data) {
  if (!data) return data;
  const ordersMap = buildMap(data);
  return data.products.map((p) => ({
    ...p,
    orders: ordersMap.get(p.prod_id) || []
  }));
}

console.log(groupData(data));

edited Aug 30, 2022 at 9:54

answered Aug 30, 2022 at 9:13

Sergey Sosunov

4,6502 gold badges13 silver badges21 bronze badges

9 Comments

Emili Bellot Pulido Over a year ago

and if I know that the order can only be of one product, it would be better if after order filter, remove them from data?

Sergey Sosunov Over a year ago

@EmiliBellotPulido You can but GC (Garbage Collector) will do the work for you, for things that are not global you dont really need to worry about. It is if you are worried about your data object. if you are worried about results - you can just add .filter(x => x.orders.length > 0) after .map operator. But i could misunderstood you, sorry.

Sergey Sosunov Over a year ago

@EmiliBellotPulido Provide me some example and i will clarify

Emili Bellot Pulido Over a year ago

Your answer is correct, but I am thinking that foreach product I have to filter every time the entire order array and, maybe, as I know that the orders correspons only to one product, it would be better if I only filter the remaining orders.

Sergey Sosunov Over a year ago

@EmiliBellotPulido You have a good ideas but modifying array itself is also costly and it basically depends on how much items you have in the arrays. For something that is below 100 - i would not even bother with that. But if you are curious - someone already tried and measured your idea: medium.com/@justintulk/…

|

Collectives™ on Stack Overflow

How to restructure data using reduce?

3 Answers 3

Comments

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related