Reduce array differentiating by category in reactjs

Question

I'm developing an app in reactjs and I have the array:

array = [
  {
    "id": 1,
    "categoryId": 2,
    "period": "202101",
    "type": "A",
    "price": 100,
    "discount": 0
  },
    {
    "id": 2,
    "categoryId": 2,
    "period": "202102",
    "type": "B",
    "price": 300,
    "discount": 20
  },
  {
    "id": 3,
    "categoryId": 2,
    "period": "202103",
    "type": "B",
    "price": 200,
    "discount": 70
  },
    {
    "id": 4,
    "categoryId": 2,
    "period": "202104",
    "type": "A",
    "price": 100,
    "discount": 50
  },
]

and I need to reduce it to show it as the table:

what I did to show the detail of the prices per period:

  const items = array.reduce((acc, e) => {
    if (!acc[e["categoryId"]]) {
      acc[e["categoryId"]] = {
        [e["period"]]: e["price"]
      }
    } else {
      acc[e["categoryId"]][e["period"]] = e["price"]
    }
    return acc
  }, {})

  const periods = [...new Set(Object.keys(items).map(i => Object.keys(items[i])).flat())]

thead:

  <tr>{dates.map(date => <th>{date}</th>)}</tr>      

tbody:

Object.keys(items).map((item) => {
              return (
                <tr>
                  <td>{item}</td>
                  {periods.map((period) => <td>{items[item][period] || ''}</td>)}
                </tr>
              )
            })

but it is only showing the price for each period. I need to show discount and type as well.

What changes are needed, any suggestion?

Answer 1

I think I didn't understand your needs well, but this is what I did according to your description:

array.reduce((acc, curr) => {
if (!acc[curr["categoryId"]]) {
  acc[curr["categoryId"]] = {
    [curr["period"]]: { 
        "price": curr["price"],
        "type": curr["type"],
        "discount": curr["discount"]
      }
  }
} else {
  acc[curr["categoryId"]][curr["period"]] = { 
        "price": curr["price"],
        "type": curr["type"],
        "discount": curr["discount"]
      }
}
return acc;
}, {})

And the result of this reduce is:

{
"2": {
    "202101": {
        "price": 100,
        "type": "A",
        "discount": 0
    },
    "202102": {
        "price": 300,
        "type": "B",
        "discount": 20
    },
    "202103": {
        "price": 200,
        "type": "B",
        "discount": 70
    },
    "202104": {
        "price": 100,
        "type": "A",
        "discount": 50
    }
 }
}