Kako generirati tablicu iz JSON podataka u Reactu

Jedan od najjednostavnijih načina za odvajanje podataka od vaših HTML dokumenata je njihovo pohranjivanje u JSON. JSON je popularan i s njim je lako raditi, posebno u JavaScriptu.

U Reactu ima smisla posluživati ​​JSON podatke putem tablica pomoću komponente. Ta će komponenta moći generirati tablicu koja se skalira s JSON podacima. Rezultirajuća tablica može imati koliko god redaka treba jer podaci nisu tvrdo kodirani.

Što ćete trebati

Trebat će vam Node.js instaliran na vašem računalu da biste pratili ovaj vodič i osnovno razumijevanje kako React radi.

Prije izrade tablice morat ćete izraditi novi React projekt ako ga nemate.

Stvaranje JSON podataka

Tablica će koristiti podatke pohranjene u JSON datoteci. Mogao bi dohvaćanje ovih podataka s API krajnje točke u stvarnoj aplikaciji.

U mapi src kreirajte novu datoteku pod nazivom data.json i dodajte sljedeće:

[{
"iskaznica": 1,
"ime": "Ethelred",
"prezime": "Polako",
"elektronička pošta": "[email protected]"
},{
"iskaznica": 2,
"ime": "Reta",
"prezime





instagram viewer

": "Woolmer",
"elektronička pošta": "[email protected]"
},{
"iskaznica": 3,
"ime": "Arabel",
"prezime": "Pestor",
"elektronička pošta": "[email protected]"
}]

Ovo je jednostavna JSON datoteka koja sadrži tri objekta.

Ključevi objekta - ID, ime, prezime i e-pošta - su naslovi, dok njihova odgovarajuća svojstva čine tijelo tablice.

Stvaranje komponente tablice

Napravite novu datoteku pod nazivom Table.js u mapu src i dodajte sljedeći kod.

izvozzadanofunkcijaStol({theadData, tbodyData}) {
povratak (
<stol>
<thead>
<tr>
// redak zaglavlja
</tr>
</thead>
<tijelo>
// podaci o tijelu
</tbody>
</table>
 );
}

Ova komponenta uzima adData i tBodyData kao rekvizite. theadData sadrži podatke koje ćete prikazati u retku zaglavlja. Aplikacija će te podatke izvoriti iz JSON datoteke i predati ih komponenti Table.

Stvorite funkciju u App.js zove getHeadings() i dodaje sljedeće.

konst getHeadings = () => {
povratakObjekt.ključevi (podaci[0]);
}

Budući da su ključevi za svaki objekt u JSON datoteci slični, možete jednostavno koristiti ključeve iz prvog objekta.

Ne zaboravite uvesti data.json u App.js.

uvoz podaci iz "./data.json"

Kada renderirate komponentu tablice, proslijedite naslov i JSON podatke kao rekvizite.

<Tablica theadData={getHeadings()} tbodyData={podaci}/>

Stvaranje retka zaglavlja

U ovom koraku izradit ćete komponentu za prikaz stavke u retku zaglavlja. Ova komponenta će iterirati po naslovima pomoću metode map().

U Table.js dodajte kod za ponavljanje naslova unutar oznake thead.

<tr>
 {theadData.map (naslov => {
 povratak <th ključ={naslov}>{naslov}</th>
 })}
</tr>

Zatim ćete popuniti tijelo tablice.

Stvaranje redova tijela

Tijelo tablice prikazuje podatke retka. Budući da Table.js prima podatke kao niz objekata, prvo ćete morati iterirati preko njega da biste dobili svaki objekt koji predstavlja red.

Dakle, u Table.js, iterirajte tBodyData prop ovako:

<tijelo>
 {tbodyData.map((redak, indeks) => {
 povratak <tr ključ={index}>
// red podataka
</tr>;
 })}
</tbody>

Svaki objekt reda bit će sličan primjeru objekta u nastavku.

konst red = {
"iskaznica": 1,
"ime": "Ethelred",
"prezime": "Polako",
"elektronička pošta": "[email protected]"
}

Za prikaz svake od ovih stavki morat ćete iterirati preko ključeva objekta. U svakoj iteraciji dohvatit ćete svojstvo koje odgovara tom ključu u objektu reda. Budući da su ti ključevi isti kao naslovi, upotrijebite vrijednosti iz adData prop.

Izmijenite oznaku tr za prikaz podataka retka kao što je prikazano u nastavku.

<tr ključ={index}>
// theadData sadrži ključeve
 {theadData.map((ključ, indeks) => {
 povratak <td ključ={redak[ključ]}>{redak[ključ]}</td>
 })}
</tr>;

Objedinjujući sve zajedno, komponenta Table bi trebala izgledati ovako:

izvozzadanofunkcijaStol({theadData, tbodyData}) {
povratak (
<stol>
<thead>
<tr>
 {theadData.map (naslov => {
 povratak <th ključ={naslov}>{naslov}</th>
 })}
</tr>
</thead>
<tijelo>
 {tbodyData.map((redak, indeks) => {
 povratak <tr ključ={index}>
 {theadData.map((ključ, indeks) => {
 povratak <td ključ={redak[ključ]}>{redak[ključ]}</td>
 })}
</tr>;
 })}
</tbody>
</table>
);
}

u

elementa, komponenta ponavlja niz podataka i vraća red tablice za svaki objekt.

Korištenje komponente tablice

Uvezite tablicu u App.js i renderirajte je kao što je prikazano u nastavku:

uvoz Stol iz './Stol';
uvoz podaci iz "./data.json"
funkcijaaplikacija() {
konst getHeadings = () => {
povratakObjekt.ključevi (podaci[0]);
 }
povratak (
<div className="spremnik">
<Tablica theadData={getHeadings()} tbodyData={podaci}/>
</div>
 );
}
izvozzadano aplikacija;

Komponenta tablice uzima adData i tbodyData kao rekvizite. theadData sadrži naslove generirane iz ključeva prve stavke u JSON podacima, a tbodyData sadrži cijelu JSON datoteku.

Stiliziranje s CSS modulima

Generirali ste komponentu React tablice iz JSON datoteke u ovom vodiču. Također ste naučili kako možete manipulirati JSON podacima da odgovaraju vašim potrebama. Možete poboljšati izgled svoje tablice dodavanjem CSS-a u nju. Za izradu CSS stilova s ​​lokalnim opsegom razmislite o korištenju CSS modula. Jednostavan je za korištenje i lako je započeti s njim ako koristite aplikaciju create-react-app.