首頁猿問將原始json數據傳輸到react...

將原始json數據傳輸到reactjs中的html表

JavaScript

翻過高山走不出你 2023-03-03 10:37:05

我正在尋找一種方法來在我的 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"] ]}誰能幫我？謝謝！

查看完整描述

3 回答

絕地無雙

TA貢獻1946條經驗獲得超4個贊

在您的 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;

}

反對回復 2023-03-03

MMTTMM

TA貢獻1869條經驗獲得超4個贊

這是更新的答案。我刪除了身體中的重復地圖。

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

反對回復 2023-03-03

30秒到達戰場

TA貢獻1828條經驗獲得超6個贊

嘗試這個

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

)}

</tbody>

</table>

)

}

反對回復 2023-03-03

3 回答
0 關注
193 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

將原始json數據傳輸到reactjs中的html表

將原始json數據傳輸到reactjs中的html表

3 回答

添加回答