Kuidas Reactis JSON-andmetest tabelit luua

Üks lihtsamaid viise andmete eraldamiseks HTML-dokumentidest on salvestada need JSON-i. JSON on populaarne ja sellega lihtne töötada, eriti JavaScriptis.

Reactis on mõttekas esitada JSON-andmeid tabelite kaudu, kasutades komponenti. See komponent suudab luua tabeli, mis skaleeritakse JSON-andmetega. Saadud tabelis võib olla nii palju ridu, kui ta vajab, kuna andmed pole kõvasti kodeeritud.

Mida vajate

Selle õpetuse järgimiseks ja Reacti toimimise põhiteadmiseks peab teie arvutisse installima Node.js.

Enne tabeli loomist peate tegema luua uus Reacti projekt kui sul seda pole.

JSON-andmete loomine

Tabel kasutab JSON-faili salvestatud andmeid. Sa võid hankige need andmed API lõpp-punktist reaalses rakenduses.

Looge src kaustas uus fail nimega data.json ja lisage järgmine:

[{
"id": 1,
"eesnimi": "Ethelred",
"perekonnanimi": "Aeglaselt",
"email": "[email protected]"
},{
"id": 2,
"eesnimi": "Reta",
"perekonnanimi": "Woolmer",
"email": "[email protected]"
},{
"id": 3,
"eesnimi": "Arabel",
"perekonnanimi": "Pestor",
"email": "[email protected]"
}]

See on lihtne JSON-fail, mis sisaldab kolme objekti.

Objekti võtmed – ID, eesnimi, perekonnanimi ja e-post – on pealkirjad, samas kui nende vastavad omadused moodustavad tabeli sisu.

Tabeli komponendi loomine

Looge uus fail nimega Tabel.js src kausta ja lisage järgmine kood.

eksportidavaikimisifunktsiooniTabel({theadData, tbodyData}) {
tagasi (
<laud>
<thead>
<tr>
// päise rida
</tr>
</thead>
<tbody>
// kehaandmed
</tbody>
</table>
 );
}

See komponent võtab rekvisiididena theadData ja tBodyData. theadData sisaldab andmeid, mida kuvatakse päise real. Rakendus hangib need andmed JSON-failist ja annab need üle tabelikomponendile.

Loo sisse funktsioon App.js nimetatakse getHeadings() ja lisage järgmine.

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

Kuna JSON-faili iga objekti võtmed on sarnased, saate lihtsalt kasutada esimese objekti võtmeid.

Ärge unustage importida faili data.json faili App.js.

importida andmeid alates "./data.json"

Tabeli komponendi renderdamisel edastage rekvisiididena päis ja JSON-andmed.

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

Päise rea loomine

Selles etapis loote komponendi päisereal oleva üksuse renderdamiseks. See komponent kordab pealkirju, kasutades meetodit map().

Lisage failis Table.js kood, et itereerida üle pealkirjade reklaamisildis.

<tr>
 {theadData.map (pealkiri => {
 tagasi <võti={pealkiri}>{pealkiri}</th>
 })}
</tr>

Järgmisena täidate tabeli keha.

Keharidade loomine

Tabeli sisu renderdab rea andmed. Kuna Table.js võtab andmed vastu objektide massiivina, peate esmalt neid kordama, et saada iga objekt, mis esindab rida.

Seega korrake rakenduses Table.js tBodyData propi järgmiselt:

<tbody>
 {tbodyData.map((rida, indeks) => {
 tagasi <tr võti={index}>
// rea andmed
</tr>;
 })}
</tbody>

Iga reaobjekt on sarnane alloleva objekti näitega.

konst rida = {
"id": 1,
"eesnimi": "Ethelred",
"perekonnanimi": "Aeglaselt",
"email": "[email protected]"
}

Kõigi nende üksuste kuvamiseks peate kordama objekti võtmeid. Igas iteratsioonis hangitakse atribuut, mis vastab reaobjekti võtmele. Kuna need võtmed on samad, mis pealkirjad, kasutage väärtusi theadData propist.

Muutke tr-märgendit, et kuvada rea ​​andmed, nagu allpool näidatud.

<tr võti={index}>
// theadData sisaldab võtmeid
 {theadData.map((võti, register) => {
 tagasi <td võti={rida[klahv]}>{rida[võti]}</td>
 })}
</tr>;

Kui kõik kokku viia, peaks tabeli komponent välja nägema järgmine:

eksportidavaikimisifunktsiooniTabel({theadData, tbodyData}) {
tagasi (
<laud>
<thead>
<tr>
 {theadData.map (pealkiri => {
 tagasi <võti={pealkiri}>{pealkiri}</th>
 })}
</tr>
</thead>
<tbody>
 {tbodyData.map((rida, indeks) => {
 tagasi <tr võti={index}>
 {theadData.map((võti, register) => {
 tagasi <td võti={rida[klahv]}>{rida[võti]}</td>
 })}
</tr>;
 })}
</tbody>
</table>
);
}

Aastal

element, itereerib komponent andmemassiivi ja tagastab iga objekti jaoks tabelirea.

Tabelikomponendi kasutamine

Importige tabel rakenduses App.js ja renderdage see allpool näidatud viisil:

importida Tabel alates './Tabel';
importida andmeid alates "./data.json"
funktsiooniRakendus() {
konst getHeadings = () => {
tagasiObjekt.keys (data[0]);
 }
tagasi (
<div klassiNimi="konteiner">
<Tabel theadData={getHeadings()} tbodyData={data}/>
</div>
 );
}
eksportidavaikimisi Rakendus;

Tabelikomponent võtab rekvisiididena theadData ja tbodyData. theadData sisaldab pealkirju, mis on genereeritud JSON-i andmete esimese üksuse võtmetest, ja tbodyData sisaldab kogu JSON-faili.

Stiili kujundamine CSS-i moodulitega

Lõite selles õpetuses JSON-failist React-tabeli komponendi. Samuti õppisite, kuidas saate JSON-i andmeid vastavalt oma vajadustele manipuleerida. Saate parandada oma tabeli välimust, lisades sellele CSS-i. Kohaliku ulatusega CSS-stiilide loomiseks kaaluge CSS-moodulite kasutamist. Seda on lihtne kasutada ja lihtne alustada, kui kasutate rakendust loo-reageeri.