Một trong những cách đơn giản nhất để tách dữ liệu khỏi tài liệu HTML là lưu trữ nó trong JSON. JSON rất 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ó số lượng hàng tùy theo nhu cầu vì dữ liệu không được mã hóa cứng.
1. Bạn sẽ cần những gì?
Bạn sẽ cần cài đặt Node.js trên máy tính và hiểu cơ bản về cách hoạt động của React để có thể làm theo hướng dẫn này.
Trước khi tạo bảng, bạn sẽ cần tạo một dự án React mới.
2. 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 (API Endpoint) trong một ứng dụng thực.
Trong thư mục src, tạo một file mới có tên là data.json và thêm các tệp 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 file JSON đơn giản chứa ba đối tượng.
3. 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 đoạn code sau:
export default function Table({theadData, tbodyData}) {
return (
<table>
<thead>
<tr>
// header row
</tr>
</thead>
<tbody>
// body data
</tbody>
</table>
);
}
Thành phần này lấy theadData và tBodyData làm props (properties). 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.
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 props.
<Table theadData={getHeadings()} tbodyData={data}/> 4. Tạo hàng tiêu đề
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 ().
<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.
>>> Xem thêm: 8 Khóa học lập trình reactjs chất lượng dành cho bạn
5. Tạo hàng trong phần chính
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 (array) 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}>
// row data
</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.
<tr key={index}>
// theadData contains the keys
{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ư sau:
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ử <tbody>, 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.
6. Sử dụng thành phần bảng
Nhập Bảng trong App.js và hiển thị nó 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 props. 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.
>>> Xem thêm: Tổng hợp những điều cần biết về học lập trình React Native
Kết luận
Bài viết này đã hướng dẫn bạn cách tạo một thành phần bảng React từ tệp JSON, cũng như cách thao tác dữ liệu JSON để phù hợp với nhu cầu. Nếu có bất kỳ thắc mắt nào, bạn đọc hãy để lại câu hỏi dưới phần bình luận để được giải đáp sớm nhất nhé.
>>> Tìm hiểu ngay các khóa học lập trình của FUNiX tại:
>>> Xem thêm các chủ đề hữu ích:
So sánh Angular JS và React JS
Tại sao sử dụng Hook lại là điều tốt nhất dành cho React
Angular vs ReactJS: Đâu là khung phát triển giao diện người dùng theo yêu cầu nhất trong năm 2021
Tại sao nên sử dụng React Native để phát triển ứng dụng di động
Vân Nguyễn
Dịch từ: https://www.makeuseof.com/react-generate-table-from-json/
Bình luận (0
)