Hvordan generere en tabell fra JSON-data i React

En av de enkleste måtene å skille data fra HTML-dokumentene dine på er å lagre dem i JSON. JSON er populært og enkelt å jobbe med, spesielt i JavaScript.

I React er det fornuftig å servere JSON-data via tabeller ved hjelp av en komponent. Den komponenten vil kunne generere en tabell som skaleres med JSON-dataene. Den resulterende tabellen kan ha så mange rader som den trenger siden dataene ikke er hardkodet.

Hva du trenger

Du trenger Node.js installert på maskinen din for å følge denne opplæringen og en grunnleggende forståelse av hvordan React fungerer.

Før du oppretter tabellen, må du opprette et nytt React-prosjekt hvis du ikke har en.

Opprette JSON-dataene

Tabellen vil bruke data som er lagret i en JSON-fil. Kanskje du kan hente disse dataene fra et API-endepunkt i en virkelig applikasjon.

I src-mappen oppretter du en ny fil som heter data.json og legg til følgende:

[{
"id": 1,
"fornavn": "Ethelred",
"etternavn": "Sakte",
"e-post": "eslowly0@google.es"
},{
"id": 2,
"fornavn": "Reta",
"etternavn": 





instagram viewer

"Woolmer",
"e-post": "rwoolmer1@miibeian.gov.cn"
},{
"id": 3,
"fornavn": "Arabel",
"etternavn": "Pestor",
"e-post": "apestor2@bloglovin.com"
}]

Dette er en enkel JSON-fil som inneholder tre objekter.

Objektnøklene – id, fornavn, etternavn og e-post – er overskriftene, mens deres tilsvarende egenskaper utgjør tabellens hovedtekst.

Opprette tabellkomponenten

Opprett en ny fil kalt Table.js i src-mappen og legg til følgende kode.

eksportmisligholdefunksjonBord({theadData, tbodyData}) {
komme tilbake (
<bord>
<thead>
<tr>
// overskriftsrad
</tr>
</thead>
<kroppen>
// kroppsdata
</tbody>
</table>
 );
}

Denne komponenten tar theadData og tBodyData som rekvisitter. theadData inneholder dataene du vil vise i overskriftsraden. Appen henter disse dataene fra JSON-filen og overleverer dem til tabellkomponenten.

Lag en funksjon i App.js kalt getHeadings() og legg til følgende.

konst getHeadings = () => {
komme tilbakeGjenstand.keys (data[0]);
}

Siden nøklene for hvert objekt i JSON-filen er like, kan du ganske enkelt bruke nøklene fra det første objektet.

Husk å importere data.json i App.js.

import data fra "./data.json"

Når du gjengir Tabell-komponenten, sender du overskriften og JSON-dataene som rekvisitter.

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

Opprette overskriftsraden

I dette trinnet vil du opprette en komponent for å gjengi et element i overskriftsraden. Denne komponenten vil iterere over overskriftene ved å bruke map()-metoden.

I Table.js legger du til koden for å iterere over overskriftene inne i thead-taggen.

<tr>
 {theadData.map (overskrift => {
 komme tilbake <th key={heading}>{overskrift}</th>
 })}
</tr>

Deretter vil du fylle ut brødteksten i tabellen.

Opprette kroppsradene

Tabellteksten gjengir raddataene. Siden Table.js mottar dataene som en rekke objekter, må du iterere over den først for å få hvert objekt som representerer en rad.

Så, i Table.js, iterer over tBodyData-rekvisitten slik:

<kroppen>
 {tbodyData.map((rad, indeks) => {
 komme tilbake <tr nøkkel={indeks}>
// raddata
</tr>;
 })}
</tbody>

Hvert radobjekt vil ligne på objekteksemplet nedenfor.

konst rad = {
"id": 1,
"fornavn": "Ethelred",
"etternavn": "Sakte",
"e-post": "eslowly0@google.es"
}

For å vise hvert av disse elementene, må du iterere over tastene til objektet. I hver iterasjon vil du hente egenskapen som samsvarer med den nøkkelen i radobjektet. Siden disse nøklene er de samme som overskriftene, bruk verdiene fra theadData prop.

Endre tr-taggen for å vise raddata som vist nedenfor.

<tr nøkkel={indeks}>
// theadData inneholder nøklene
 {theadData.map((nøkkel, indeks) => {
 komme tilbake <td key={rad[nøkkel]}>{rad[nøkkel]}</td>
 })}
</tr>;

Når alt samles, skal Tabell-komponenten se slik ut:

eksportmisligholdefunksjonBord({theadData, tbodyData}) {
komme tilbake (
<bord>
<thead>
<tr>
 {theadData.map (overskrift => {
 komme tilbake <th key={heading}>{overskrift}</th>
 })}
</tr>
</thead>
<kroppen>
 {tbodyData.map((rad, indeks) => {
 komme tilbake <tr nøkkel={indeks}>
 {theadData.map((nøkkel, indeks) => {
 komme tilbake <td key={rad[nøkkel]}>{rad[nøkkel]}</td>
 })}
</tr>;
 })}
</tbody>
</table>
);
}

I

element, itererer komponenten over datamatrisen og returnerer tabellraden for hvert objekt.

Bruke tabellkomponenten

Importer tabell i App.js og gjengi den som vist nedenfor:

import Bord fra './Bord';
import data fra "./data.json"
funksjonApp() {
konst getHeadings = () => {
komme tilbakeGjenstand.keys (data[0]);
 }
komme tilbake (
<div klassenavn="container">
<Tabell theadData={getHeadings()} tbodyData={data}/>
</div>
 );
}
eksportmisligholde App;

Tabellkomponenten tar theadData og tbodyData som rekvisitter. theadData inneholder overskriftene generert fra nøklene til det første elementet i JSON-dataene, og tbodyData inneholder hele JSON-filen.

Styling med CSS-moduler

Du genererte en React-tabellkomponent fra en JSON-fil i denne opplæringen. Du har også lært hvordan du kan manipulere JSON-data for å passe dine behov. Du kan forbedre utseendet til tabellen ved å legge til litt CSS til den. For å lage CSS-stiler med lokalt omfang, bør du vurdere å bruke CSS-moduler. Den er enkel å bruke og lett å komme i gang med hvis du bruker en lag-reager-app.