Cara Membuat Tabel Dari Data JSON di React

Salah satu cara paling mudah untuk memisahkan data dari dokumen HTML Anda adalah dengan menyimpannya di JSON. JSON populer dan mudah digunakan, terutama dalam JavaScript.

Di React, masuk akal untuk menyajikan data JSON melalui tabel menggunakan komponen. Komponen itu akan dapat menghasilkan tabel yang diskalakan dengan data JSON. Tabel yang dihasilkan dapat memiliki baris sebanyak yang dibutuhkan karena data tidak dikodekan secara keras.


Apa yang Anda Butuhkan

Anda perlu menginstal Node.js di mesin Anda untuk mengikuti tutorial ini dan pemahaman dasar tentang cara kerja React.

Sebelum membuat tabel, Anda perlu membuat proyek React baru jika Anda belum memilikinya.

Membuat Data JSON

Tabel akan menggunakan data yang disimpan dalam file JSON. Anda dapat mengambil data ini dari titik akhir API dalam aplikasi kehidupan nyata.

Di folder src, buat file baru bernama data.json dan tambahkan yang berikut ini:

[{
"id": 1,
"first_name": "Ethelred",
"last_name": "Slowly",
"email": "[email protected]"
},{
"id": 2,
"first_name": "Reta",
"last_name": "Woolmer",
"email": "[email protected]"
},{
"id": 3,
"first_name": "Arabel",
"last_name": "Pestor",
"email": "[email protected]"
}]

Ini adalah file JSON sederhana yang berisi tiga objek.

Kunci objek—id, nama depan, nama belakang, dan email—adalah judul, sedangkan properti terkaitnya membentuk isi tabel.

Membuat Komponen Tabel

Buat file baru bernama Tabel.js di folder src dan tambahkan kode berikut.

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

Komponen ini menggunakan theadData dan tBodyData sebagai props. theadData berisi data yang akan Anda tampilkan di baris header. Aplikasi akan mengambil data ini dari file JSON dan menyerahkannya ke komponen Tabel.

See also  11 Tweak Nautilus Terbaik untuk Mendapatkan Lebih Banyak dari File Supervisor di Linux


Buat fungsi di aplikasi.js disebut getHeadings() dan tambahkan yang berikut ini.

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

Karena kunci untuk setiap objek dalam file JSON serupa, Anda cukup menggunakan kunci dari objek pertama.

Ingatlah untuk mengimpor data.json di App.js.

import data from "./data.json"

Saat Anda merender komponen Tabel, teruskan heading dan data JSON sebagai props.

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

Pada langkah ini, Anda akan membuat komponen untuk merender item di baris header. Komponen ini akan mengulangi judul menggunakan metode map().

Di Table.js, tambahkan kode untuk mengulangi judul di dalam tag thead.

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

Selanjutnya, Anda akan mengisi badan tabel.

Membuat Baris Tubuh

Badan tabel merender data baris. Karena Table.js menerima data sebagai array objek, Anda perlu mengulanginya terlebih dahulu untuk mendapatkan setiap objek yang mewakili baris.

Jadi, di Table.js, ulangi prop tBodyData seperti ini:

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

Setiap objek baris akan mirip dengan contoh objek di bawah ini.

const row = {
"id": 1,
"first_name": "Ethelred",
"last_name": "Slowly",
"email": "[email protected]"
}

Untuk menampilkan masing-masing item ini, Anda perlu mengulangi kunci objek. Di setiap iterasi, Anda akan mengambil properti yang cocok dengan kunci itu di objek baris. Karena kunci ini sama dengan judul, gunakan nilai dari prop theadData.


Ubah tag tr untuk menampilkan data baris seperti gambar di bawah ini.

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

Menyatukan semuanya, komponen Tabel akan terlihat seperti ini:

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>
);
}

See also  Cara Merekam, Melacak, dan Mempelajari Gejala Anda di Apple Well being App

Dalam

elemen, komponen mengulangi array data dan mengembalikan baris tabel untuk setiap objek.

Menggunakan Komponen Tabel

Impor Tabel di App.js dan render seperti yang ditunjukkan di bawah ini:

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

Komponen tabel mengambil theadData dan tbodyData sebagai props. theadData berisi judul yang dihasilkan dari kunci item pertama dalam data JSON, dan tbodyData berisi seluruh file JSON.

Styling Dengan Modul CSS

Anda membuat komponen tabel React dari file JSON dalam tutorial ini. Anda juga mempelajari cara memanipulasi data JSON agar sesuai dengan kebutuhan Anda. Anda dapat meningkatkan tampilan tabel Anda dengan menambahkan beberapa CSS ke dalamnya. Untuk membuat gaya CSS cakupan lokal, pertimbangkan untuk menggunakan modul CSS. Mudah digunakan dan mudah untuk memulai jika Anda menggunakan aplikasi create-react-app.