将原始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"]

   ]

}`);

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>

Answer 2

这是更新的答案。我删除了身体中的重复地图。

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

Answer 3

尝试这个

 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>

    )

  }