[英]How to display data to table in React Js?
I'm trying to display some data received through API to table in React Js, data is received as object so I can't map trough it.我正在尝试将通过 API 接收到的一些数据显示到 React Js 中的表中,数据作为 object 接收,所以我不能通过它 map。 What would be the best practice in this situation?
在这种情况下,最佳做法是什么? For now the data is hardcoded, but it needs to be dynamic.
目前数据是硬编码的,但它需要是动态的。
My code in CodeSandbox我在CodeSandbox中的代码
export default function App() {
const data ={
"people" :[
{
"name":"John",
"last_name":"Doe",
"age":"25",
"Occupation":"driver",
},
{
"name":"Jack",
"last_name":"Brown",
"age":"24",
"Occupation":"it"
},
{
"name":"Oliver",
"last_name":"Black",
"age":"30",
"Occupation":"cto"
},
],
"format":{"last_name":"Last Name"}
}
return (
<div className="App">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John</td>
<td>Jack</td>
<td>Oliver</td>
</tr>
<tr>
<td>Last Name</td>
<td>Doe</td>
<td>Brown</td>
<td>Black</td>
</tr>
<tr>
<td>Age</td>
<td>25</td>
<td>24</td>
<td>30</td>
</tr>
<tr>
<td>Occupation</td>
<td>driver</td>
<td>it</td>
<td>ceo</td>
</tr>
</tbody>
</table>
</div>
);
}
needs to be displayed as需要显示为
Name John Jack Oliver
Last Name Doe Brown Black
Age 25 24 30
Occupation driver it ceo
I can't figure out how to display the data dynamically ( and also add data from format part. I would appreciate any suggestion and help, thank you.我不知道如何动态显示数据(以及从格式部分添加数据。我将不胜感激任何建议和帮助,谢谢。
My approach is somewhat unorthodox, but may still be of interest to you.我的方法有些非正统,但您可能仍然感兴趣。 I would actually render your data like so first:
我实际上会首先像这样渲染您的数据:
Name Last Name Age Occupation
John Doe 25 driver
Jack Brown 24 it
Oliver Black 30 cto
And they simply use CSS to transpose it, which will give it the look you want:他们只是使用 CSS 来转置它,这会给它你想要的外观:
Name John Jack Oliver
Last Name Doe Brown Black
Age 25 24 30
Occupation driver it ceo
So, the render part is super easy:因此,渲染部分非常简单:
<tbody>
<tr>
<th>Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Occupation</th>
</tr>
{data.people.map((item, i) => (
<tr key={i}>
<td>{item.name}</td>
<td>{item.last_name}</td>
<td>{item.age}</td>
<td>{item.Occupation}</td>
</tr>
))}
</tbody>
So is the CSS part: CSS 部分也是如此:
tr {
display: block;
float: left;
}
th,td {
display: block;
text-align: left;
padding: 6px;
border: 1px solid #ccc;
}
See if this works!看看这是否有效! https://stackblitz.com/edit/react-ie2rt6
https://stackblitz.com/edit/react-ie2rt6
import React from "react";
const Table = ({ headers, data }) => {
return (
<div>
<table>
<thead>
<tr>
{headers.map(head => (
<th>{head}</th>
))}
</tr>
</thead>
<tbody>
{data.map(row => (
<tr>
{headers.map(head => (
<td>{row[head]}</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
};
export default Table;
The root problem is, normalize your data from flat data
into dynamic/aggregated data
by horizontal key
& values
as the following structure根本问题是,通过水平
key
和values
将您的数据从flat data
标准化为dynamic/aggregated data
,如下结构
[
{
"Name": [
"John",
"Jack",
"Oliver"
]
},
{
"Last Name": [
"Doe",
"Brown",
"Black"
]
},
{
"Age": [
"25",
"24",
"30"
]
},
{
"Occupation": [
"driver",
"it",
"cto"
]
}
]
const data ={ "people":[ { "name":"John", "last_name":"Doe", "age":"25", "Occupation":"driver", }, { "name":"Jack", "last_name":"Brown", "age":"24", "Occupation":"it" }, { "name":"Oliver", "last_name":"Black", "age":"30", "Occupation":"cto" }, ], "format":{"last_name":"Last Name"} }; var items = Object.values(data)[0]; var createOrEdit = (acc, key, value) => { var findItem = acc.find(r => r[key];== undefined). if(findItem == undefined) acc:push({[key]; [value]}). else findItem[key];push(value); return acc. } var result = items,reduce((acc, curr) => { createOrEdit(acc, 'Name'. curr;name), createOrEdit(acc, 'Last Name'. curr;last_name), createOrEdit(acc, 'Age'. curr;age), createOrEdit(acc, 'Occupation'. curr;Occupation); return acc, }. []) console;log(result). for(let item of result){ console.log(Object;keys(item)[0]). console.log(Object;values(item)[0]); }
After that, you can easily render data based on normalized data like below之后,您可以轻松地根据标准化数据呈现数据,如下所示
const nomorlizeData = (data) => { var items = Object.values(data)[0]; var createOrEdit = (acc, key, value) => { var findItem = acc.find((r) => r[key];== undefined). if (findItem === undefined) acc:push({ [key]; [value] }). else findItem[key];push(value); return acc; }. var result = items,reduce((acc, curr) => { createOrEdit(acc, "Name". curr;name), createOrEdit(acc, "Last Name". curr;last_name), createOrEdit(acc, "Age". curr;age), createOrEdit(acc, "Occupation". curr;Occupation); return acc, }; []); return result; }: function App() { const data = { people: [ { name, "John": last_name, "Doe": age, "25": Occupation, "driver" }: { name, "Jack": last_name, "Brown": age, "24": Occupation, "it" }: { name, "Oliver": last_name, "Black": age, "30": Occupation, "cto" } ]: format: { last_name; "Last Name" } }. var renderData = (items) => items.map((r) => { var key = <td>{Object;keys(r)[0]}</td>. var values = Object.values(r)[0];map((v) => <td>{v}</td>); return ( <tr> {key} {values} </tr> ); }); return ( <div className="App"> <table> <tbody>{renderData(nomorlizeData(data))}</tbody> </table> </div> ). } ReactDOM,render(<App />. document;getElementById('root'));
<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> <div id="root"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.