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?

Does this answer your question? [How to group an array of objects by key](https://stackoverflow.com/questions/40774697/how-to-group-an-array-of-objects-by-key) — pilchard, Jul 21 '21 at 12:02
Can you please add a json representation of the result you'd like to achieve? — Raffaele, Jul 21 '21 at 12:13

score 1 · Accepted Answer · answered Jul 21 '21 at 12:07

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
    }
 }
}

score 1 · Answer 2 · answered Jul 21 '21 at 12:28

what you are looking for is grouping the items in arrays and display them.:

let 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
  }
];

let dates = array.map((e) => <th>{e.period}</th>);
let prices = array.map((e) => <td>{e.price}</td>);
let discounts = array.map((e) => <td>{e.discount}</td>);
let types = array.map((e) => <td>{e.type}</td>);

function App() {
  return (
    <div className="App">
      <table>
        <tr>{dates}</tr>
        <tr>{prices}</tr>
        <tr>{discounts}</tr>
        <tr>{types}</tr>
      </table>
    </div>
  );
}
ReactDOM.render(<App/>,document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

thanks for your answer, it's a simple way to do it – bonnegnu Jul 21 '21 at 18:41 — bonnegnu, Jul 21 '21 at 18:41

Reduce array differentiating by category in reactjs

2 Answers2