How to list a set of json data in a table where it should dynamically show the data in according to it's first row data

Question

I have a set of json data i need to put this data in a table. But the hard part is: i have 2 columns location and rooms each location has two or more rooms. i need to list the table with each location there corresponding rooms should display in the next column. NB: even if we add new location and rooms in json, the table should be able to handle it dynamically. i have been trying really hard to get the output any help will be appreciated. CodeSandbox Link : https://codesandbox.io/s/conference-room-table-n4fm3h?file=/src/App.js
attaching a demo image how the table output should look: we should get the final result like this

data.json file

 
{
  "user_id": 62,
  "user_location": "2nd floor, jothirmaya",
  "location_code": "joyhirmaya",
  "rooms": [
    {
      "id": 16,
      "room_name": "room1",
      "room_location": "1st floor, orion",
      "location_code": "orion"
    },
    {
      "id": 17,
      "room_name": "room2",
      "room_location": "1st floor, orion",
      "location_code": "orion"
    },
    {
      "id": 18,
      "room_name": "room3",
      "room_location": "1st floor, orion",
      "location_code": "orion"
    },
    {
      "id": 19,
      "room_name": "Room1",
      "room_location": "2nd floor, Mars",
      "location_code": "mars"
    },
    {
      "id": 20,
      "room_name": "Room2",
      "room_location": "2nd floor, Mars",
      "location_code": "Mars"
    },
    {
      "id": 21,
      "room_name": "Room3",
      "room_location": "2nd floor, Mars",
      "location_code": "Mars"
    },
    {
      "id": 22,
      "room_name": "conference room 1",
      "room_location": "4th floor, venus",
      "location_code": "venus"
    },
    {
      "id": 23,
      "room_name": "conference room 2",
      "room_location": "4th floor, venus",
      "location_code": "venus"
    },
    {
      "id": 24,
      "room_name": "conference room 3",
      "room_location": "4th floor, venus",
      "location_code": "venus"
    },
    {
      "id": 25,
      "room_name": "conference room 1",
      "room_location": "3rd floor, jupiter",
      "location_code": "jupiter"
    },
    {
      "id": 26,
      "room_name": "conference room 2",
      "room_location": "3rd floor, jupiter",
      "location_code": "jupiter"
    },
    {
      "id": 27,
      "room_name": "conference room 3",
      "room_location": "3rd floor, jupiter",
      "location_code": "jupiter"
    }
  ]
}

App.js file i'm looping in to the rooms and accessing room_location alone and pushing into an array then removing duplicates then i'm showing it in the table. then i'm not being able to show it's corresponding rooms to the correct locations.

import { useEffect } from 'react';
import jsonData from './data.json'
import './App.css';



function App() {

  useEffect(()=>{
    location()
  },[])

  const location=()=>{
    let listLoc = [];
    jsonData.rooms.map((room)=>{
      return listLoc.push(room.room_location)
    })
    
    return listLoc;
  };

  let roomlist = location()
  let locationList = [...new Set(roomlist)]
  console.log(locationList);



  return (
    <div className="App">
     <table>
  
  <td>
  {locationList.map((location)=>{
    return<tr> <th>{location}</th></tr>
                })}
      </td>       
  
  <td>{jsonData.rooms.map((room)=>{
      return <tr><td>{room.room_name}</td></tr>
      })} </td> 
   
</table>
    </div>
  );
}

export default App;

Answer 1

You can do something like this , it will give something similar to the given image and also its dynamic table will change if data changes

 return (
    <div className="App">
      <table>
        <td>
          {locationList.map((location) => {
            return (
              <tr>
                {" "}
                <th>{location}</th>
                <td>
                  {jsonData.rooms.map((room) => {
                    return (
                      <tr>
                        <td>
                          {room.room_location === location && room.room_name}
                        </td>
                      </tr>
                    );
                  })}{" "}
                </td>
              </tr>
            );
          })}
        </td>
      </table>
    </div>
  );

Also some tip use useState hook instead of pushing your data into empty array