javascript - 将原始 json 数据传输到 reactjs 中的 html 表
问题描述
我正在寻找一种在我的反应应用程序 https://www.depicus.com/swim-bike-run/pace-conversion-chart中显示如下图的表格的方法
我一直在努力解决如何在我的应用程序中显示所有数据,比如第一张图片。
这是我尝试过的代码。
<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"]
]
}
谁能帮我?谢谢!
解决方案
在您的 JSON 对象中,您使用的是 2D 数组。我用一维数组替换了它,因为没有必要使用二维数组。您在某些时候以错误的方式使用索引,我已经解决了这个问题。
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>
推荐阅读
- c# - 他们是一种在单击按钮时创建意图的单一对象的方法吗
- bash - 标题的 PS1 如何不覆盖提示的 PS1
- python - 带有语句问题的 Python
- python - 从数据框字符串列中提取日/年并求和 [Python]
- html - 如果受容器不透明度的影响,则透明椭圆中的红色边框
- python - 正确的面罩检测
- apache-spark - Spark 在 Kubernetes 云引擎上仅使用一个节点提交,请求一个 cpu
- java - java.util.concurrent.atomic.LongAdder 类的可行性
- node.js - 无法将用户 ID 检查到 mongoose 数据库数组中并给出错误?
- c# - 为什么 .NET Core 源代码在方法上需要大量“#if !CORECLR static #endif”?