[英]Javascript + React :- Unable to put the data in table and then render it
[英]React - render data in a table
我有如下状态的对象:
{
"data": {
"available": {
"profileOne": {
"a": 14,
"b": 14,
"c": 0,
"d": 0,
"e": 18
},
"profileTwo": {
"a": 13,
"b": 9,
"c": 0,
"d": 0,
"e": 18
},
"profileThree": {
"a": 12,
"b": 12,
"c": 0,
"d": 0,
"e": 14
},
"profileFour": {
"a": 3,
"b": 3,
"c": 0,
"d": 0,
"e": 5
},
"profileFive": {
"a": 6,
"b": 3,
"c": 0,
"d": 0,
"e": 11
}
},
"isFetching": false
}
我需要根据以下提供的以下示例图像使用数据:
我知道,为了能够在这些对象上进行映射,我需要将其转换为数组,这几乎就是我所在的位置。
有人对此有解决方案吗?
这是一个入门的示例。 希望这可以帮助。
const json = {
data: {
available: {
profileOne: {
a: 14,
b: 14,
c: 0,
d: 0,
e: 18
},
profileTwo: {
a: 13,
b: 9,
c: 0,
d: 0,
e: 18
}
}
}
};
const header = ["pro", "a", "b", "c", "d", "e"];
class App extends React.Component {
render() {
return (
<table>
<thead>
<tr>{header.map((h, i) => <th key={i}>{h}</th>)}</tr>
</thead>
<tbody>
{Object.keys(json.data.available).map((k, i) => {
let data = json.data.available[k];
return (
<tr key={i}>
<td>{k}</td>
<td>{data.a}</td>
<td>{data.b}</td>
<td>{data.c}</td>
<td>{data.d}</td>
<td>{data.e}</td>
</tr>
);
})}
</tbody>
</table>
);
}
}
您需要遍历数据,但是由于它是一个对象,因此您需要将其修改为可映射的。 这是一个可能的渲染函数:
render(){
const tableData = data.available
return
(<table>
<tr>
<td>Profile</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
{(Object.keys(tableData))
.map(key=>({...tableData[key],title:key}))
.map(row=>(
<tr>
{(Object.keys(row))
.map(key=>
<td>
{row[key]}
</td>
)
)}
</tr>
)
</table>
}
请注意,如果您可以修改数据源以提供一个数组,这将更加简单。 对象要求重构是可映射的,因此使代码复杂得多。
const obj = { "data": { "available": { "profileOne": { "a": 14, "b": 14, "c": 0, "d": 0, "e": 18 }, "profileTwo": { "a": 13, "b": 9, "c": 0, "d": 0, "e": 18 }, "profileThree": { "a": 12, "b": 12, "c": 0, "d": 0, "e": 14 }, "profileFour": { "a": 3, "b": 3, "c": 0, "d": 0, "e": 5 }, "profileFive": { "a": 6, "b": 3, "c": 0, "d": 0, "e": 11 } }, "isFetching": false }} const entries = Object.entries(obj.data.available).map(data => Object.entries(data)) console.log(entries)
使用Object.entries
将为您提供一组可以映射的数组和子数组。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.