I am trying to loop the data from json and display it it in table. I am having array of objects. I am having 3 values in my json file , I need to display all three data in individual cells, the third column is in array format. So the structure of my json is array of object and inside object my third column is again an array. I am trying to get all the data dynamically, but when I am using map method I am unable to get the values. Hence I tried using Object.Values and forEach, and I am getting the values based on position. Can any one assist me how get all the data dynamically. Thanks in advance. I have pasted the code and mock data below. Thanks in advance!
//I need to display the values in below table component.
const Table = () => (
<Table>
<Header>
<HeaderCell key="NAME">Contact Name</HeaderCell>
<HeaderCell key="ContactID">Contact ID</HeaderCell>
<HeaderCell key="contactGrp">Contact Group</HeaderCell>
</Header>
<Body>
<Row key="conact-0">
<Cell key="NAME">ABC</Cell>
<Cell key="ContactID">123</Cell>
<Cell key="contactGrp">[1, 2]//In badge format</Cell>
</Row>
</Body>
</Table>
);
//Table PROPS- Prop: Children Type: Node (the child content for table consisting of eithera Table Header or Body)
//Table Header Props- Prop: Children Type: node
//Table Row Props - Prop: Children Type: node (child tablecells to be placed within the tr)
//Table Cell Props - Prop: Children Type: node (content to be displayed for row cell)
//My Code
Const customTable = ({mockData})=> {
return (
<Table>
<Header>
<HeaderCell key="Name"> Contact Name</HeaderCell>
<HeaderCell key="ID"> Contact ID</HeaderCell>
<HeaderCell key="Group"> Contact Group</HeaderCell>
</Header>
<Body>
{
mockData.forEach((element) => {
console.log(element.key);
element.cells.forEach(cell => {
<Row key={cell.key}>
<Cell key={cell.key}>{cell.contactName}</Cell>////Here I am not getting the Data
<Cell key={cell.key}>{cell.contactID}</Cell>//Here I am not getting the Data
</Row>
})
})
}
</Body>
//MOCK DATA
const mockData = [
{
"key":"row-0",
"cells":[
{ key: 'cell-0', id: 'ID-0', headerName:'contactname', contactName: 'ABC' },
{ key: 'cell-1', id: 'ID-1', headerName: 'contactID', contactID:'123' },
{ key: 'cell-3', id: 'ID-3', headerName: 'contactGrp', contactGroup: ['A', 'B']}
]
}
];
It's easier to break it down into steps within the confines of the component. This example utilises three functions to find the headings, all the rows, and the cells for each of those rows.
function Example({ data }) {
// Return a list of the headings
function getHeadings(data) {
return data[0].cells.map(h => {
return <th>{h.headerName}</th>;
});
}
// Return the cells for a single row
// making sure that each element of the
// the array in `contactGroup` is created
// from a Badge component
function getRow(cells) {
return cells.map(cell => {
const { headerName } = cell;
if (Array.isArray(cell[headerName])) {
return (
<td>
{cell[headerName].map(el => {
return <Badge text={el} />;
})}
</td>
);
}
return <td>{cell[headerName]}</td>;
});
}
// Get all the rows
function getRows(data) {
return data.map(row => {
return <tr>{getRow(row.cells)}</tr>;
});
}
return (
<table>
<thead>{getHeadings(data)}</thead>
<tbody>{getRows(data)}</tbody>
</table>
);
}
// Badge component
function Badge({ text }) {
return (
<div className="badge">{text}</div>
);
}
const data=[{key:"row-0",cells:[{key:"cell-0",id:"ID-0",headerName:"contactName",contactName:"ABC"},{key:"cell-1",id:"ID-1",headerName:"contactID",contactID:"123"},{key:"cell-3",id:"ID-3",headerName:"contactGroup",contactGroup:["A","B"]}]},{key:"row-1",cells:[{key:"cell-1-0",id:"ID-1-0",headerName:"contactName",contactName:"DEF"},{key:"cell-1-1",id:"ID-1-1",headerName:"contactID",contactID:"456"},{key:"cell-1-3",id:"ID-1-3",headerName:"contactGroup",contactGroup:["C","D"]}]}];
ReactDOM.render(
<Example data={data} />,
document.getElementById('react')
);table { border-collapse: collapse; border; 1px solid #565656; }
thead { background-color: #efefef; text-transform: uppercase; }
td, th { padding: 0.5em; border:1px solid #cdcdcd; }
.badge { display: inline; padding: 0.2em 0.4em; background-color: #87CEFA; border: 1px solid #343434; border-radius: 5px; }
.badge:not(:last-child) { margin-right: 0.4em; }<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>This ain't that hard to do and you even don't need to utilize Object.values first. Just do a .forEach on the object itself and inside the loop do another .forEach on the elements returned from the previous .forEach run.
For example:
const mockData = [{
"key": "row-0","cells": [{
key: 'cell-0',
id: 'ID-0',
headerName: 'contactname',
contactName: 'ABC'
},
{
key: 'cell-1',
id: 'ID-1',
headerName: 'contactID',
contactID: '123'
},
{
key: 'cell-3',
id: 'ID-3',
headerName: 'contactGrp',
contactGroup: ['A', 'B']
}
]
}];
mockData.forEach((element) => {
console.log(element.key);
element.cells.forEach(cell => {
console.log(cell.key, cell.id);
});
});key values among sibling elements have to be unique, to be rendered correctly.
Inside your element.cells.forEach the 2 <Cell>s have the same key !
Make it:
<Cell key={cell.key + 'contactName' }>{cell.contactName}</Cell>
<Cell key={cell.key + 'contactId' }>{cell.contactID}</Cell>