I'm looking for a way to display a table like the following image in my react app https://www.depicus.com/swim-bike-run/pace-conversion-chart
And here is the raw data I transferred to JSON.
I was struggling with how to display all the data like the first image in my app.
Here is the code I did try.
<table>
<tbody>
<tr>
{chartJSON.title.map((data, i) => <th key={i}>{data[i]}</th>)}
</tr>
{chartJSON.paceChart.map((data, index) => {
return <tr key={index}>{data[0]}</tr>
})}
{chartJSON.paceChart.map((data, index) => {
return <tr key={index}>{data[1]}</tr>
})}
</tbody>
</table>
Here is some of the raw data
{
"title": [
["KM PER HOUR", "MILES PER HOUR", "MINS PER KM", "MINS PER MILE", "5K", "10K", "HALF MARATH0N", "MARATHON"]
],
"paceChart": [
["7.00kph", "4.35mph", "8:34", "13:40", "00:42:51", "01:25:42", "03:00:51", "06:01:42"],
["7.10kph", "4.41mph", "8:27", "13:36", "00:42:15", "01:24:30", "02:58:18", "05:56:37"],
["7.20kph", "4.47mph", "8:20", "13:25", "00:41:40", "01:23:20", "02:55:50", "05:51:40"],
["7.30kph", "4.54mph", "8:13", "13:14", "00:41:05", "01:22:11", "02:53:25", "05:46:50"]
]
}
Can anyone help me? Thanks!
In your JSON object, You are using a 2D array. I replaced it with 1D array as it's not necessary to use 2D array. You were using indexes in wrong way at some points I have fixed that.
const chartJSON = JSON.parse(`{ "title": ["KM PER HOUR", "MILES PER HOUR", "MINS PER KM", "MINS PER MILE", "5K", "10K", "HALF MARATH0N", "MARATHON"] , "paceChart": [ ["7.00kph", "4.35mph", "8:34", "13:40", "00:42:51", "01:25:42", "03:00:51", "06:01:42"], ["7.10kph", "4.41mph", "8:27", "13:36", "00:42:15", "01:24:30", "02:58:18", "05:56:37"], ["7.20kph", "4.47mph", "8:20", "13:25", "00:41:40", "01:23:20", "02:55:50", "05:51:40"], ["7.30kph", "4.54mph", "8:13", "13:14", "00:41:05", "01:22:11", "02:53:25", "05:46:50"] ] }`); const table = <table> <tbody> <tr> {chartJSON.title.map((data, i) => <th key={i}>{data}</th> )} </tr> { chartJSON.paceChart.map((rowData,rowIndex)=> { return <tr key={rowIndex}> { rowData.map(cellData=> <td> {cellData} </td>) } </tr> }) } </tbody> </table> const root = document.querySelector('body'); ReactDOM.render(table,root);
td,th,table{ text-align:center; border:1px solid dodgerblue; }
<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>
This is updated answer. I remove duplicate map in body.
<table>
<tbody>
<tr>
{chartJSON.title[0].map((data, i) => {
return <th key={i}>{data}</th>;
})}
</tr>
{chartJSON.paceChart.map((data, index) => {
return (
<tr>
{data.map((data2, i) => {
return <td key={i}>{data2}</td>;
})}
</tr>
);
})}
</tbody>
</table>;
try this
render() {
return (
<table>
<tbody>
<tr>
{this.state.chartJSON.title.map((data, i) => <th key={"h${i}"}>{data}</th>)}
</tr>
{
this.state.chartJSON.paceChart.map((row, index)=>
<tr>{row.map((item,i)=> <td key={i}>{item}</td>)}</tr>
)}
</tbody>
</table>
)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.