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

Chia sẻ kiến thức 07/08/2022

Cùng FUNiX tìm hiểu cách một thành phần React có thể tạo markup và truy cập dữ liệu ở định dạng JSON.

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.

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.

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.

Các khóa đối tượng — id, first name (tên), last name (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 đ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.

Tạo một hàm trong App.js có tên 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 props.

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

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 ().

Trong Table.js, hãy thêm đoạn code sau để 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 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.

Sửa thẻ tr để hiển thị dữ liệu hàng như dưới đây.
<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.

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.

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é.

Xem thêm: Gatsby.js và Next.js: Hai React framework tốt nhất và các use cases

Vân Nguyễn

Dịch từ: https://www.makeuseof.com/react-generate-table-from-json/

Bình luận (
0
)

Graphic Noti Complete Course

Chúc mừng học viên

Hoàng Lê Tuấn Nam

Đã xuất sắc hoàn thành

Kỹ sư phần mềm cơ bản - Basic Software Engineer đạt học bổng 5%

Bài liên quan

  • Tầng 0, tòa nhà FPT, 17 Duy Tân, Q. Cầu Giấy, Hà Nội
  • info@funix.edu.vn
  • 0782313602 (Zalo, Viber)        

yêu cầu gọi lại

error: Content is protected !!