Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju.
Naučite kako razriješiti ugniježđeni objekt niza pomoću JavaScript funkcije karte.
Većina modernih aplikacija koristi vanjske podatke iz drugih aplikacija i alata putem API-ja. Ovaj podaci dolaze u svim vrstama shema, a na vama je da ih dekonstruirate dok ne dobijete ono što želite koristiti. Među tim shemama su podatkovni objekti koji sadrže ugniježđene nizove. Može biti izazovno prikazati ovu vrstu podataka. Ovaj članak će vas naučiti kako preslikati ugniježđeni niz u komponenti React.
Korištenje funkcije karte
Funkcija karte prolazi kroz petlju preko stavki zadanog niza i vraća navedenu izjavu ili kod za svaku.
Za ravni niz, funkcija karte radi na sljedeći način:
const arr = ['a', 'b', 'c'];
konst rezultat1 = arr.map (element => {
povratak element;
});
U Reactu morate staviti funkciju karte u vitičaste zagrade i koristiti an
funkcija strelice za vraćanje elementa čvora za svaku iteraciju. Stavke u ravnom nizu iznad mogu se prikazati kao JSX elementi ovako:const arr = ['a', 'b', 'c'];
funkcijaaplikacija () {
povratak (
<>
{arr.map((stavka, indeks) => {
<span key={index}>{a}</span>
})}
</>
)
}
Imajte na umu da dodjeljujete ključ svakom elementu koji funkcija karte vraća. To pomaže Reactu identificirati stavke koje su promijenjene ili uklonjene. Ovo je važno tijekom procesa pomirenja.
Mapiranje preko ugniježđenog niza u React komponenti
Ugniježđeni niz sličan je nizu koji sadrži drugi niz. Na primjer, sljedeće polje recepata sadrži objekt s poljem.
konst recepti = [
{
ID: 716429,
titula: "Tjestenina s češnjakom, mladim lukom, cvjetačom & Krušne mrvice",
slika: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
vrste jela: [
"ručak",
"glavno jelo",
"glavno jelo",
"večera"
],
recept: {
// podaci o receptu
}
}
]
Za podatke poput ovog s ugniježđenim nizovima, trebali biste koristiti funkciju mapiranja za svaki niz.
U ovom primjeru mapirali biste niz podataka kao što je prikazano u nastavku:
izvozzadanofunkcijaRecepti() {
povratak (
<div>
{recepti.map((recept) => {
povratak <div ključ={recept.id}>
<h1>{recept.naslov}</h1>
<img src={recept.slika} alt="slika recepta" />
{recipe.dishTypes.map((tip, indeks) => {
povratak <span key={index}>{tip}</span>
})}
</div>
})}
</div>
)
}
Komponenta Recepti će prikazati div element koji sadrži podatke o receptu za svaki recept u nizu recepata.
Rad s nizovima u JavaScriptu
JavaScript nudi široku paletu metoda nizova koje čine rad s nizovima jednostavnijim. Ovaj je članak pokazao kako prikazati podatke iz ugniježđenog niza pomoću metode mapiranja. Osim karte, postoje i metode koje vam pomažu da podatke gurnete u niz, spojite dva niza ili čak sortirate niz.
