CODEWITHSUNDEEP
javascriptarraysjsonreactjsdatatables
bonnegnu
bonnegnu

Reputation: 195

Show values in a table for the same item in reacts

I'm developing an application in React.JS

I have the array:

const array = [
    {
      "id": 1,
      "date": {
        "id": 1,
        "name": "202001"
      },
      "item": {
        "id": 1,
        "name": "I1",
        "description": "item1"
      },
      "type": {
        "id": 1,
        "name": "type1"
      },
      "price": 100,
      "unit": "unit1"
      },
      {
      "id": 2,
      "date": {
        "id": 2,
        "name": "202002"
      },
      "item": {
        "id": 1,
        "name": "I1",
        "description": "item1"
      },
      "type": {
        "id": 1,
        "name": "type1"
      },
      "price": 200,
      "unit": "unit1"
    },
    {
      "id": 3,
      "date": {
        "id": 2,
        "name": "202002"
      },
      "item": {
        "id": 2,
        "name": "I2",
        "description": "item2"
      },
      "type": {
        "id": 2,
        "name": "type2"
      },
      "price": 300,
      "unit": "unit2"
    },
  ]

And I show the data as shown in the table:

ITEM TYPE 202001 202002 TOTAL
I1 // item1 type1 100 // unit1 200 // unit1 300
i2 // item2 type1 - 300 // unit2 300
TOTAL 100 500 600

I did this to get some values:

items = array.reduce((acc, e) => {
    if (!acc[e["item"]["name"]]) {
      acc[e["item"]["name"]] = {
        [e["date"]["name"]]: e["price"],
        'type': e.type?.name,
        'description': e.item?.description,
      }
    } else {
      acc[e["item"]["name"]][e["date"]["name"]] = e["price"]
    }
    return acc
  }, {})

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

totalSumPerDate = {};

dates.forEach(date => {
  const sumOnDate = Object.values(items).reduce((acc, curr) => {
    acc = acc + (curr[date]? curr[date] : 0);
    return acc;
  }, 0);
  totalSumPerDate[[date]] = sumOnDate;
});

totalSum = Object.values(totalSumPerDate).reduce((acc, curr) => acc+curr, 0);

sumPerItem = {};

Object.keys(items).forEach(key => {
   const sum = Object.values(items[key]).reduce((acc, curr) => acc + curr, 0);
   sumPerItem[[key]] = sum;
});

And to show the table:

<table>
  <thead>
    <tr>
      <th>ITEM</th>
      {dates.map(date => <th>{date}</th>)}
      <th>TOTAL</th>
    </tr>
  </thead>
  <tbody>
  {
    Object.keys(items_dicc).map((item) => {
      return (
        <tr>
          <td>{item} // {items[item]?.description}</td>
          <td>{items[item]?.type}</td>
          {dates.map((date) => <td>{items[item][date] || ''}</td>)}
          <td>{sumPerItem[item]}</td>
        </tr>
      )
    })
  }
    <tr>
      <td>TOTAL</td>
        {Object.values(totalSumPerDate).map(item => <td>{item}</td>)}
      <td>{totalSum}</td>
    </tr>
  </tbody>
</table>

I need to add the description, type and unit, I tried to do it but it brings me everything in dates.

How can I fix it using the above to display the table correctly, suggestions?

Upvotes: 0

Views: 134

Answers (1)

pguardiario
pguardiario

Reputation: 54992

For example:

{array.map(row => <tr>
  <td>{row.id}</td>
  <td>{row.date.id}</td>
  <td>{row.date.name}</td>
</tr>)}

Upvotes: 1

Related Questions