Ufdjrw

I'm trying to populate a table header and body with an array of objects. I feel that this is really inefficient. Is there a better way to do this?

clients:
 [
 
 Id: 0,
 Name: "Camren Moore",
 Country: "Wierdo Land",
 City: "Oud-Turnhout",
 Salary: "$36,738",
 Actions: null,
 ,
 
 Id: 1,
 Name: "Adison Moore",
 Country: "Crazy Land",
 City: "Oud-Turnhout",
 Salary: "$23,738",
 Actions: null,
 
 ]

let headers = [];
let body = [];
let i = 0;

for (var client of clients) 
 if (i === 0) 
 for (var key in client) 
 headers.push(key);
 
 
 i++;
 var ar = [];
 for (var value of headers)
 ar.push(client[value]);
 body.push(ar);

Here is a solution with 2 one-liners

const clients =
[
 
 Id: 0,
 Name: "Camren Moore",
 Country: "Wierdo Land",
 City: "Oud-Turnhout",
 Salary: "$36,738",
 Actions: null,
 ,
 
 Id: 1,
 Name: "Adison Moore",
 Country: "Crazy Land",
 City: "Oud-Turnhout",
 Salary: "$23,738",
 Actions: null,
 
];
 

const header = Object.keys(clients[0]).map(key => key);
const body = clients.map(client => header.map(id => client[id]));

console.log(header)
console.log(body)
 
 

I didn't implement it in React because I think your issue is not React specific.

Here is how you can do this.

Table component takes the data as prop. The head section of the table is generated by getting the keys from the first object of the data array and mapping over them. Each table row is generated by mapping over the data and rendering a list of Row components.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const data = [
 
 Id: 0,
 Name: "Camren Moore",
 Country: "Wierdo Land",
 City: "Oud-Turnhout",
 Salary: "$36,738",
 Actions: null
 ,
 
 Id: 1,
 Name: "Adison Moore",
 Country: "Crazy Land",
 City: "Oud-Turnhout",
 Salary: "$23,738",
 Actions: null
 
]

const Table = props => 
 return (
 <table>
 <thead>
 <tr>
 Object.keys(data[0]).map(header => (
 <th>header</th>
 ))
 </tr>
 </thead>
 <tbody>
 props.data.map(row => (
 <Row column=row />
 ))
 </tbody>
 </table>
 );
;

const Row = props => 
 return (
 <tr>
 <td>props.column.Id</td>
 <td>props.column.Name</td>
 <td>props.column.Country</td>
 <td>props.column.City</td>
 <td>props.column.Salary</td>
 <td>props.column.Actions == null ? "N.A" : props.column.Actions </td>
 </tr>
 );
;

function App() 
 return (
 <div className="App">
 <Table data=data />
 </div>
 );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Hope this helps !