Cách tạo bảng từ dữ liệu JSON trong React

Một trong những cách đơn giản nhất để tách dữ liệu khỏi tài liệu HTML của bạn là lưu trữ nó trong JSON. JSON phổ biến và dễ làm việc, đặc biệt là trong JavaScript.

Trong React, việc phân phát dữ liệu JSON thông qua các bảng bằng cách sử dụng một thành phần là rất hợp lý. Thành phần đó sẽ có thể tạo một bảng dựa trên dữ liệu JSON. Bảng kết quả có thể có nhiều hàng tùy theo nhu cầu vì dữ liệu không được mã hóa cứng.

Những gì bạn sẽ cần

Bạn sẽ cần cài đặt Node.js trên máy của mình để làm theo hướng dẫn này và hiểu cơ bản về cách hoạt động của React.

Trước khi tạo bảng, bạn sẽ cần tạo một dự án React mới nếu bạn chưa có.

Tạo dữ liệu JSON

Bảng sẽ sử dụng dữ liệu được lưu trữ trong tệp JSON. Bạn có thể tìm nạp dữ liệu này từ một điểm cuối API trong một ứng dụng đời thực.

Trong thư mục src, tạo một tệp mới có tên data.json và thêm những thứ sau:

[{
"id": 1,
"first_name": "Ethelred",
"last_name": "Slowly",
"email": "eslowly0@google.es"
},{
"id": 2,
"first_name": "Reta",
"last_name": "Woolmer",
"email": "rwoolmer1@miibeian.gov.cn"
},{
"id": 3,
"first_name": "Arabel",
"last_name": "Pestor",
"email": "apestor2@bloglovin.com"
}]

Đây là một tệp JSON đơn giản chứa ba đối tượng.

Các khóa đối tượng — id, tên, họ và email — là các tiêu đề, trong khi các thuộc tính tương ứng của chúng tạo nên phần nội dung của bảng.

Tạo thành phần bảng

Tạo một tệp mới có tên Table.js trong thư mục src và thêm mã sau.

export default function Table({theadData, tbodyData}) {
return (
<table>
<thead>
<tr>
</tr>
</thead>
<tbody>
</tbody>
</table>
);
}

Thành phần này lấy theadData và tBodyData làm đạo cụ. theadData chứa dữ liệu mà bạn sẽ hiển thị trong hàng tiêu đề. Ứng dụng sẽ lấy nguồn dữ liệu này từ tệp JSON và chuyển nó cho thành phần Bảng.

Tạo một chức năng trong App.js được gọi là getHeadings () và thêm phần sau.

const getHeadings = () => {
return Object.keys(data[0]);
}

Vì các khóa cho mỗi đối tượng trong tệp JSON là tương tự nhau, bạn có thể chỉ cần sử dụng các khóa từ đối tượng đầu tiên.

Hãy nhớ nhập data.json trong App.js.

import data from "./data.json"

Khi bạn hiển thị thành phần Bảng, hãy chuyển tiêu đề và dữ liệu JSON làm đạo cụ.

<Table theadData={getHeadings()} tbodyData={data}/> 

Trong bước này, bạn sẽ tạo một thành phần để hiển thị một mục trong hàng tiêu đề. Thành phần này sẽ lặp lại các tiêu đề bằng phương thức map ().

Trong Table.js, hãy thêm mã để lặp lại các tiêu đề bên trong thẻad.

<tr>
{theadData.map(heading => {
return <th key={heading}>{heading}</th>
})}
</tr>

Tiếp theo, bạn sẽ điền nội dung của bảng.

Tạo hàng cơ thể

Nội dung bảng hiển thị dữ liệu hàng. Vì Table.js nhận dữ liệu dưới dạng một mảng các đối tượng, trước tiên bạn sẽ cần phải lặp lại nó để lấy mỗi đối tượng đại diện cho một hàng.

Vì vậy, trong Table.js, hãy lặp lại phần hỗ trợ tBodyData như sau:

<tbody>
{tbodyData.map((row, index) => {
return <tr key={index}>
</tr>;
})}
</tbody>

Mỗi đối tượng hàng sẽ tương tự như ví dụ đối tượng bên dưới.

const row = {
"id": 1,
"first_name": "Ethelred",
"last_name": "Slowly",
"email": "eslowly0@google.es"
}

Để hiển thị từng mục này, bạn sẽ cần phải lặp lại các phím của đối tượng. Trong mỗi lần lặp, bạn sẽ truy xuất thuộc tính khớp với khóa đó trong đối tượng hàng. Vì các khóa này giống với các tiêu đề, hãy sử dụng các giá trị từ phần hỗ trợ theadData.

Sửa thẻ tr để hiển thị dữ liệu hàng như hình dưới đây.

<tr key={index}>
{theadData.map((key, index) => {
return <td key={row[key]}>{row[key]}</td>
})}
</tr>;

Kết hợp mọi thứ lại với nhau, thành phần Bảng sẽ trông như thế này:

export default function Table({theadData, tbodyData}) {
return (
<table>
<thead>
<tr>
{theadData.map(heading => {
return <th key={heading}>{heading}</th>
})}
</tr>
</thead>
<tbody>
{tbodyData.map((row, index) => {
return <tr key={index}>
{theadData.map((key, index) => {
return <td key={row[key]}>{row[key]}</td>
})}
</tr>;
})}
</tbody>
</table>
);
}

Trong phần tử

, thành phần lặp qua mảng dữ liệu và trả về hàng trong bảng cho mỗi đối tượng.

Sử dụng thành phần bảng

Nhập Bảng trong App.js và hiển thị nó như hình dưới đây:

import Table from './Table';
import data from "./data.json"
function App() {
const getHeadings = () => {
return Object.keys(data[0]);
}
return (
<div className="container">
<Table theadData={getHeadings()} tbodyData={data}/>
</div>
);
}
export default App;

Thành phần bảng lấy theadData và tbodyData làm đạo cụ. theadData chứa các tiêu đề được tạo từ các khóa của mục đầu tiên trong dữ liệu JSON và tbodyData chứa toàn bộ tệp JSON.

Tạo kiểu với các mô-đun CSS

Bạn đã tạo một thành phần bảng React từ tệp JSON trong hướng dẫn này. Bạn cũng đã học cách bạn có thể thao tác dữ liệu JSON để phù hợp với nhu cầu của mình. Bạn có thể cải thiện giao diện của bảng của mình bằng cách thêm một số CSS vào đó. Để tạo các kiểu CSS có phạm vi cục bộ, hãy xem xét sử dụng các mô-đun CSS. Nó rất đơn giản để sử dụng và dễ dàng bắt đầu nếu bạn đang sử dụng một ứng dụng tạo ứng dụng.