将原始json数据传输到reactjs中的html表

Question

我正在寻找一种方法来在我的 React 应用程序中显示如下图所示的表格 https://www.depicus.com/swim-bike-run/pace-conversion-chart

这是我传输到 JSON 的原始数据。

我一直在为如何在我的应用程序中显示所有数据（如第一张图片）而苦苦挣扎。

这是我尝试过的代码。

        <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>

这是一些原始数据

{

"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"]

   ]

}

谁能帮我？谢谢！

Answer 1

在您的 JSON 对象中，您使用的是二维数组。我将其替换为一维数组，因为没有必要使用二维数组。您在某些时候以错误的方式使用了索引，我已经修复了。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"]&nbsp; &nbsp;]}`);const table =<table>&nbsp; <tbody>&nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; &nbsp; {chartJSON.title.map((data, i) => <th key={i}>{data}</th> )}&nbsp; &nbsp; &nbsp;</tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; chartJSON.paceChart.map((rowData,rowIndex)=> {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return <tr key={rowIndex}>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rowData.map(cellData=> <td> {cellData} </td>)&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;</tbody></table>const root = document.querySelector('body');ReactDOM.render(table,root);td,th,table{&nbsp; text-align:center;&nbsp; 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>

Answer 2

这是更新的答案。我删除了身体中的重复地图。&nbsp; &nbsp; <table>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; {chartJSON.title[0].map((data, i) => {&nbsp; &nbsp; &nbsp; &nbsp; return <th key={i}>{data}</th>;&nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; </tr>&nbsp; &nbsp; {chartJSON.paceChart.map((data, index) => {&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data.map((data2, i) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <td key={i}>{data2}</td>;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; })}&nbsp; </tbody></table>;

Answer 3

尝试这个&nbsp;render() {&nbsp;&nbsp;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp;<table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.chartJSON.title.map((data, i) => <th key={"h${i}"}>{data}</th>)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.state.chartJSON.paceChart.map((row, index)=>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>{row.map((item,i)=> <td key={i}>{item}</td>)}</tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; )&nbsp; }