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