1

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

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

VS code output

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

Amila Senadheera
  • 12,229
  • 15
  • 27
  • 43
selva surya
  • 31
  • 1
  • 7

1 Answers1

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

enter image description here

Code Sandbox

Amila Senadheera
  • 12,229
  • 15
  • 27
  • 43
  • @selva surya, check this out !! – Amila Senadheera Jan 13 '22 at 06:53
  • Hi, it's working, can you explain how it's working, because when I try to send JSON only for months November and December, its values are assigned to Jan and Feb. it should be assigned to column Nov and Dec other column should be empty. – selva surya Jan 13 '22 at 07:20
  • I changed the code sandbox with Nov, Dec as months it works! can you give the data for that? – Amila Senadheera Jan 13 '22 at 07:23
  • The code which you edited is working. Thank you So muchhhh!!!!. I am new to react js, can you explain what you did in if statement. – selva surya Jan 13 '22 at 07:29
  • @selvasurya, Read these docs for `reduce`(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) and `Object.entries`(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries) if you are not familiar with them. I have put some comments in the code – Amila Senadheera Jan 13 '22 at 07:32