Kako ustvariti tabelo iz podatkov JSON v Reactu

Eden najpreprostejših načinov za ločevanje podatkov od vaših dokumentov HTML je shranjevanje v JSON. JSON je priljubljen in enostaven za delo, zlasti v JavaScriptu.

V Reactu je smiselno streči podatke JSON prek tabel z uporabo komponente. Ta komponenta bo lahko ustvarila tabelo, ki se spreminja s podatki JSON. Dobljena tabela ima lahko toliko vrstic, kot jih potrebuje, saj podatki niso trdo kodirani.

Kaj boste potrebovali

Če želite slediti tej vadnici, boste potrebovali nameščen Node.js na vašem računalniku in osnovno razumevanje delovanja Reacta.

Preden ustvarite tabelo, boste morali ustvarite nov projekt React če ga nimate.

Ustvarjanje podatkov JSON

Tabela bo uporabljala podatke, shranjene v datoteki JSON. Lahko bi pridobi te podatke iz končne točke API v resnični aplikaciji.

V mapi src ustvarite novo datoteko z imenom data.json in dodajte naslednje:

[{
"id": 1,
"ime": "Ethelred",
"priimek": "počasi",
"E-naslov": "[email protected]"
},{
"id": 2,
"ime": "Reta",
"priimek": "Woolmer",
"E-naslov": "[email protected]





instagram viewer

"
},{
"id": 3,
"ime": "Arabel",
"priimek": "Pestor",
"E-naslov": "[email protected]"
}]

To je preprosta datoteka JSON, ki vsebuje tri predmete.

Ključi objekta – ID, ime, priimek in e-pošta – so naslovi, medtem ko njihove ustrezne lastnosti tvorijo telo tabele.

Ustvarjanje komponente tabele

Ustvari novo datoteko z imenom Table.js v mapo src in dodajte naslednjo kodo.

izvozprivzetofunkcijoTabela({theadData, tbodyData}) {
vrnitev (
<tabela>
<thead>
<tr>
// vrstica glave
</tr>
</thead>
<tbody>
// podatki o telesu
</tbody>
</table>
 );
}

Ta komponenta vzame adData in tBodyData kot rekvizite. theadData vsebuje podatke, ki jih boste prikazali v naslovni vrstici. Aplikacija bo pridobila te podatke iz datoteke JSON in jih predala komponenti Tabela.

Ustvarite funkcijo v App.js imenovan getHeadings() in dodajte naslednje.

konst getHeadings = () => {
vrnitevObjekt.keys (podatki[0]);
}

Ker so ključi za vsak predmet v datoteki JSON podobni, lahko preprosto uporabite ključe iz prvega predmeta.

Ne pozabite uvoziti data.json v App.js.

uvoz podatke od "./data.json"

Ko upodabljate komponento Tabela, posredujte naslov in podatke JSON kot rekvizite.

<Tabela theadData={getHeadings()} tbodyData={podatki}/>

Ustvarjanje vrstice glave

V tem koraku boste ustvarili komponento za upodobitev postavke v vrstici glave. Ta komponenta bo ponavljala naslove z uporabo metode map().

V Table.js dodajte kodo za ponavljanje po naslovih znotraj oznake thead.

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

Nato boste zapolnili telo tabele.

Ustvarjanje telesnih vrstic

Telo tabele upodobi podatke vrstice. Ker Table.js prejme podatke kot matriko predmetov, jo boste morali najprej ponoviti, da boste dobili vsak predmet, ki predstavlja vrstico.

Torej, v Table.js ponovite tBodyData prop takole:

<tbody>
 {tbodyData.map((vrstica, indeks) => {
 vrnitev <tr key={index}>
// podatki vrstice
</tr>;
 })}
</tbody>

Vsak predmet vrstice bo podoben spodnjemu primeru predmeta.

konst vrstica = {
"id": 1,
"ime": "Ethelred",
"priimek": "počasi",
"E-naslov": "[email protected]"
}

Če želite prikazati vsakega od teh elementov, boste morali iterirati po ključih predmeta. V vsaki ponovitvi boste pridobili lastnost, ki se ujema s tem ključem v predmetu vrstice. Ker so ti ključi enaki kot naslovi, uporabite vrednosti iz prop theadData.

Spremenite oznako tr za prikaz podatkov vrstice, kot je prikazano spodaj.

<tr key={index}>
// theadData vsebuje ključe
 {theadData.map((ključ, indeks) => {
 vrnitev <td key={vrstica[key]}>{vrstica[ključ]}</td>
 })}
</tr>;

Če združimo vse skupaj, bi morala komponenta tabele izgledati takole:

izvozprivzetofunkcijoTabela({theadData, tbodyData}) {
vrnitev (
<tabela>
<thead>
<tr>
 {theadData.map (naslov => {
 vrnitev <th key={heading}>{naslov}</th>
 })}
</tr>
</thead>
<tbody>
 {tbodyData.map((vrstica, indeks) => {
 vrnitev <tr key={index}>
 {theadData.map((ključ, indeks) => {
 vrnitev <td key={vrstica[key]}>{vrstica[ključ]}</td>
 })}
</tr>;
 })}
</tbody>
</table>
);
}

V

element, komponenta ponovi podatkovno matriko in vrne vrstico tabele za vsak objekt.

Uporaba komponente tabele

Uvozite tabelo v App.js in jo upodobite, kot je prikazano spodaj:

uvoz Tabela od './Tabela';
uvoz podatke od "./data.json"
funkcijoaplikacija() {
konst getHeadings = () => {
vrnitevObjekt.keys (podatki[0]);
 }
vrnitev (
<div className="posoda">
<Tabela theadData={getHeadings()} tbodyData={podatki}/>
</div>
 );
}
izvozprivzeto aplikacija;

Komponenta tabele vzame theadData in tbodyData kot rekvizite. theadData vsebuje naslove, ustvarjene iz ključev prvega elementa v podatkih JSON, tbodyData pa vsebuje celotno datoteko JSON.

Oblikovanje z moduli CSS

V tej vadnici ste ustvarili komponento tabele React iz datoteke JSON. Naučili ste se tudi, kako lahko manipulirate s podatki JSON, da ustrezajo vašim potrebam. Videz tabele lahko izboljšate tako, da ji dodate nekaj CSS. Če želite ustvariti sloge CSS z lokalnim obsegom, razmislite o uporabi modulov CSS. Je preprost za uporabo in enostaven za začetek, če uporabljate aplikacijo create-react-app.