How to assign a value to particular cell in table layout in react js?

Question

I am trying to create a table view in react js, which has data from Jan to Dec which I will be getting from JSON, I tried to fetch and assign them to the table. The values are assigned but they get repeated, I cannot find the logic to fix them. I need the output like this

The code which I am working on is

<table>
    <thead>
        <tr>
            <th>Commodity Name</th>
            <th>Jan</th>
            <th>Feb</th>
            <th>Mar</th>
            <th>Apr</th>
            <th>May</th>
            <th>Jun</th>
            <th>Jul</th>
            <th>Aug</th>
            <th>Sep</th>
            <th>Oct</th>
            <th>Nov</th>
            <th>Dec</th>
        </tr>
    </thead>
    <tbody>
        {quantity &&
            Object.keys(quantity).map(key =>
                quantity[key].map(data => (
                    <tr>
                        <td>{data.comm_name}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                    </tr>
                ))
            )}
    </tbody>
</table>

This is the JSON I am getting from the backend

{
    "January": [
        {
            "name": "selva",
            "loc_name": "Trichy",
            "comm_name": "Batteries",
            "quantity": "435",
            "reportdate": "2022-01"
        },
        {
            "name": "selva",
            "loc_name": "Trichy",
            "comm_name": "E-Waste",
            "quantity": "54",
            "reportdate": "2022-01"
        },
        {
            "name": "selva",
            "loc_name": "Trichy",
            "comm_name": "Metal",
            "quantity": "67.78",
            "reportdate": "2022-01"
        }
    ],
    "February": [
        {
            "name": "selva",
            "loc_name": "Trichy",
            "comm_name": "Batteries",
            "quantity": "54",
            "reportdate": "2022-02"
        },
        {
            "name": "selva",
            "loc_name": "Trichy",
            "comm_name": "E-Waste",
            "quantity": "67",
            "reportdate": "2022-02"
        },
        {
            "name": "selva",
            "loc_name": "Trichy",
            "comm_name": "Metal",
            "quantity": "78",
            "reportdate": "2022-02"
        }
    ]
}

This is the output I got

I tried to use the if statement but I got errors, and I fixed it, but no data is shown under any column

Answer 1

First, you need to convert your data into a row-wise format and then you can display it easily.

Try like below.

export default function App() {
  
  const monthsArray = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]; 
  
  const quantity = { January: [ { name: "selva", loc_name: "Trichy", comm_name: "Batteries", quantity: "435", reportdate: "2022-01" }, { name: "selva", loc_name: "Trichy", comm_name: "E-Waste", quantity: "54", reportdate: "2022-01" }, { name: "selva", loc_name: "Trichy", comm_name: "Metal", quantity: "67.78", reportdate: "2022-01" } ], February: [ { name: "selva", loc_name: "Trichy", comm_name: "Batteries", quantity: "54", reportdate: "2022-02" }, { name: "selva", loc_name: "Trichy", comm_name: "E-Waste", quantity: "67", reportdate: "2022-02" }, { name: "selva", loc_name: "Trichy", comm_name: "Metal", quantity: "78", reportdate: "2022-02" } ] };

  const convertedData = Object.entries(quantity).reduce(
    // get month and its arr in the initial data object 
    (prev, [month, dataArr]) => {
      // get the month index 
      const dataIndex = monthsArray.indexOf(month.substring(0, 3));
      dataArr.forEach(({ comm_name, quantity }) => {
        if (!prev[comm_name]) {
          // comm_name does not has intialized yet. create an empty array with 12 empty strings (for 12 months)
          prev[comm_name] = new Array(12).fill("");;
        }
        // assign quantity to the array where index is the month
        prev[comm_name][dataIndex] = quantity;
      });
      return prev;
    },
    {}
  );

  return (
    <table>
      <thead>
        <tr>
          <th>Commodity Name</th>
          {monthsArray.map((month) => (
            <th>{month}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {Object.entries(convertedData).map(([comm_name, dataArr]) => (
          <tr>
            <td>{comm_name}</td>
            {dataArr.map((qty) => (
              <td>{qty}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Code Sandbox