javascript - 完全动态地从 JSON 创建表
问题描述
我想从一个包含动态th
的 JSON 数组创建整个表,因此将头部解耦为:
import React from 'react';
import TableDataTR from './TableTRView';
const TableView = ({ thds, tableData }) => {
if (!thds) {
return <table></table>;
}
return (
<div>
<table>
<thead>
<tr>
{thds.map((data, i) => <th key={i}>{data.th}</th>)}
</tr>
</thead>
<TableDataTR tableData={tableData}/>
</table>
</div>
)
}
export default TableView;
表格打印头部,但我无法打印我的tbody
:
import React, { Component } from 'react';
class TableDataTR extends Component {
render() {
let rows = this.props.tableData.map((currElement, index) =>{
return(
<tr key={index}>
<td>currElement[index]</td>
</tr>
)
});
return (
<tbody>{rows}</tbody>
);
}
}
export default TableDataTR;
示例数据,表头
thds : [ { th: 'th1' },
{ th: 'th2' }]
tableData:[ { tdData1: 'somedata', tdData2: 'somedata2' },
{ tdData1: 'somedata', tdData2: 'somedata2' },]
表头工作正常,但里面的数据tbody
根本不显示。
最终目标是获取任意 2 个数组并相应地显示表格。
解决方案
您需要使用键名访问表数据
let rows = this.props.tableData.map((currElement, index) => {
return (
<tr>
{ Object.keys(currElement).map((item) =>
(
<td>{currElement[item]}</td>
)
)}
</tr>
)
});
推荐阅读
- r - 如何将带有空格的路径字符串变量传递给R中的系统命令
- android - Android MediaPlayer 准备
- android - 如何在回收站视图中检测项目计数
- android - 单元测试时来自 Toast 的 NullPointerException
- javascript - 角高图表颜色。除了 Highcharts.getOptions().colors[index] 还有什么方法可以获取颜色?
- mysql - Mysql触发器,将来自不同表的两个值相乘,按组汇总并将值添加到另一列
- ruby-on-rails - Rails.root - 未初始化的常量
- python - 在某些条件下从数据框中删除重复项
- c++ - 从标准输入将双打存储在向量中
- c++ - C++ 字符数组不接受超过 4 个字符的输入