[FIXED] How to display data to table in React Js?

Issue

I'm trying to display some data received through API to table in React Js, data is received as object so I can't map trough it. What would be the best practice in this situation? For now the data is hardcoded, but it needs to be dynamic.

My code in CodeSandbox

export default function App() {

  const data ={
    
    "people" :[
      {
        "name":"John",
        "last_name":"Doe",
        "age":"25",
        "Occupation":"driver",
      },
      {
        "name":"Jack",
        "last_name":"Brown",
        "age":"24",
        "Occupation":"it"
      },
      {
        "name":"Oliver",
        "last_name":"Black",

        "age":"30",
        "Occupation":"cto"
      },
    ],

    "format":{"last_name":"Last Name"}
  }
  
  return (
    <div className="App">
     <table>
       <tbody>
         <tr>
           <td>Name</td>
           <td>John</td>
           <td>Jack</td>
           <td>Oliver</td>
           
         </tr>
         <tr>
           <td>Last Name</td>
           <td>Doe</td>
           <td>Brown</td>
           <td>Black</td>
           
         </tr>
         <tr>
           <td>Age</td>
           <td>25</td>
           <td>24</td>
           <td>30</td>
           
         </tr>
         <tr>
           <td>Occupation</td>
           <td>driver</td>
           <td>it</td>
           <td>ceo</td>
         </tr>

         
       </tbody>
     </table>
    </div>
  );
}

needs to be displayed as

Name         John     Jack      Oliver
Last Name    Doe      Brown     Black
Age          25       24        30
Occupation   driver   it        ceo

I can't figure out how to display the data dynamically ( and also add data from format part. I would appreciate any suggestion and help, thank you.

Solution

The root problem is, normalize your data from flat data into dynamic/aggregated data by horizontal key & values as the following structure

[
  {
    "Name": [
      "John",
      "Jack",
      "Oliver"
    ]
  },
  {
    "Last Name": [
      "Doe",
      "Brown",
      "Black"
    ]
  },
  {
    "Age": [
      "25",
      "24",
      "30"
    ]
  },
  {
    "Occupation": [
      "driver",
      "it",
      "cto"
    ]
  }
]

const data ={
    "people" :[
      {
        "name":"John",
        "last_name":"Doe",
        "age":"25",
        "Occupation":"driver",
      },
      {
        "name":"Jack",
        "last_name":"Brown",
        "age":"24",
        "Occupation":"it"
      },
      {
        "name":"Oliver",
        "last_name":"Black",

        "age":"30",
        "Occupation":"cto"
      },
    ],

    "format":{"last_name":"Last Name"}
  };
var items  = Object.values(data)[0];

var createOrEdit = (acc, key, value) => {
    var findItem = acc.find(r => r[key] !== undefined);
    if(findItem == undefined)
      acc.push({[key]: [value]});
    else
      findItem[key].push(value);
    
    return acc;
}

var result = items.reduce((acc, curr) => {
    createOrEdit(acc, 'Name', curr.name);
    createOrEdit(acc, 'Last Name', curr.last_name);
    createOrEdit(acc, 'Age', curr.age);    
    createOrEdit(acc, 'Occupation', curr.Occupation);
    
    return acc;
}, [])

console.log(result);
  
for(let item of result){
  console.log(Object.keys(item)[0]);
  console.log(Object.values(item)[0]);
}

After that, you can easily render data based on normalized data like below

const nomorlizeData = (data) => {
  var items = Object.values(data)[0];

  var createOrEdit = (acc, key, value) => {
    var findItem = acc.find((r) => r[key] !== undefined);
    if (findItem === undefined) acc.push({ [key]: [value] });
    else findItem[key].push(value);

    return acc;
  };

  var result = items.reduce((acc, curr) => {
    createOrEdit(acc, "Name", curr.name);
    createOrEdit(acc, "Last Name", curr.last_name);
    createOrEdit(acc, "Age", curr.age);
    createOrEdit(acc, "Occupation", curr.Occupation);

    return acc;
  }, []);

  return result;
};

function App() {
  const data = {
    people: [
      {
        name: "John",
        last_name: "Doe",
        age: "25",
        Occupation: "driver"
      },
      {
        name: "Jack",
        last_name: "Brown",
        age: "24",
        Occupation: "it"
      },
      {
        name: "Oliver",
        last_name: "Black",

        age: "30",
        Occupation: "cto"
      }
    ],

    format: { last_name: "Last Name" }
  };

  var renderData = (items) =>
    items.map((r) => {
      var key = <td>{Object.keys(r)[0]}</td>;
      var values = Object.values(r)[0].map((v) => <td>{v}</td>);
      return (
        <tr>
          {key}
          {values}
        </tr>
      );
    });
  return (
    <div className="App">
      <table>
        <tbody>{renderData(nomorlizeData(data))}</tbody>
      </table>
    </div>
  );
}



ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Codesanbox demo here

Answered By - Nguyễn Văn Phong

Answer Checked By - David Goodson (PHPFixing Volunteer)