# REST API tömbelemek megjelenítése Sub Query kiegészítővel

> Egy REST API végpont tömb típusú tulajdonságainak kiírása beágyazott listázásként a Sub Query kiegészítővel: lekérdezések, séma, sablonok.

A **Sub Query** kiegészítő a szülő objektum egy tulajdonságából olvassa ki a tömb elemeit. Így a REST API végpont objektumaiban lévő tömbök elemeit beágyazott listázásként jelenítheted meg. Elementorban és a blokkszerkesztőben is működik.

Előfeltétel, hogy a JetEngine aktív legyen, és legyen bekötött REST API végpont.

A példában diákok listáját kapod a végpontról. Minden diáknak van egy `languages` tömbje (egyetlen objektummal, amelynek három tulajdonsága: `first-language`, `second-language`, `third-language`), és egy `extra-activities` tömbje, amely objektumok helyett csak szöveges értékeket tartalmaz.

## A végpont bekötése

1. Nyisd meg a **JetEngine → JetEngine → REST API-végpontok** oldalt, és kösd be a végpontot.
2. Kattints a **Send Request** gombra, és ellenőrizd, hogy a kérés sikeres, és az adat a helyes formátumban érkezik.
3. Mentsd a végpontot.

## Egyedi lekérdezés a végponthoz (nem kötelező)

Ez a lépés kihagyható, de megmutatja az adat szerkezetét.

1. A **JetEngine → Lekérdezéskészítő** oldalon vegyél fel új lekérdezést.
2. A **Query Type** legyen „REST API lekérdezés”, a **From Endpoint** listában pedig válaszd ki a végpontot. Szűkítheted az eredményt további szabályokkal.
3. Mentsd a lekérdezést, és kapcsold be az eredmények előnézetét (**Preview results**), hogy lásd a visszakapott adatot.

## A kiegészítő telepítése

A JetPluginok ingyenes kiegészítői külön bővítményként tölthetők le. Töltsd le a **Sub Query** kiegészítőt, majd a **Bővítmények → Új hozzáadása** oldalon töltsd fel, és aktiváld.

## Sub Query létrehozása objektumtömbhöz

1. A **JetEngine → Lekérdezéskészítő** oldalon vegyél fel új lekérdezést, adj neki nevet, és a **Query Type** listában válaszd a „Sub Query” típust.
2. A **Sub Query** részben a **Parent Object Property** mezőbe írd be a szülő tulajdonság nevét, amelynek tömbjét ki akarod olvasni (példa: `languages`).
3. Az **Item Schema** részben add meg, milyen tulajdonságokból álljon a Sub Query egy eleme. Csak azokat vedd fel, amelyeket a beágyazott listázásban meg is jelenítesz. A **Property Name** a tulajdonság címkéje a lekérdezés eredményében, az **Initial Object Property** pedig a tömb elemének tényleges neve (példa: `first-language`).
4. Vegyél fel annyi tulajdonságot, amennyi kell, és mentsd.

## Sub Query szöveges tömbhöz

Ha a tömb szöveges vagy számértékeket tartalmaz (példa: `extra-activities`), a séma szerkezete egyszerűbb.

1. Hozz létre új „Sub Query” típusú lekérdezést.
2. A **Parent Object Property** legyen `extra-activities`.
3. Az **Item Schema** részben vegyél fel egyetlen tulajdonságot, és adj neki nevet. Az **Initial Object Property** mezőt hagyd üresen. Az elemek listája automatikusan töltődik.
4. Mentsd a lekérdezést.

A `languages` típusú objektumtömb elemeit a **Dynamic Field** elem „Gyermekelem lekérése objektumból/tömbből” callbackjével is megjelenítheted, Sub Query nélkül. A szöveges tömböknél azonban erősen a Sub Query ajánlott.

## Beágyazott listázások

A fenti Sub Query lekérdezésekből beágyazott listázási sablonokat építesz.

### Sablon Elementorban

1. A **JetEngine → Listázások/komponensek** oldalon kattints az **Új elem hozzáadása** gombra.
2. A **Listing Source** legyen „Lekérdezéskészítő”, válaszd ki a Sub Query-t az egyedi lekérdezések közül, add meg a sablon nevét, és kattints a **Create Listing Item** gombra.
3. Helyezz el egy **Dynamic Field** widgetet. A **FORRÁS** maradjon „Bejegyzés/kifejezés/felhasználó/objektum adatai”, az **Object Field** listában keresd meg a Sub Query nevét: alatta a lekérdezés által visszaadott elemek szerepelnek. Ezekből építsd fel az elrendezést.
4. Tedd közzé a sablont. Ha az előnézet üres, ne aggódj: az elemek akkor jelennek meg, amikor a beágyazott listázást a fő listázásba teszed.

### Sablon a blokkszerkesztőben

1. Az **Új elem hozzáadása** gombra kattintva a **Listing Source** legyen „Lekérdezéskészítő”, válaszd ki a Sub Query-t, add meg a nevet, és a **Listing View** legyen „Blocks (Gutenberg)”. Kattints a **Create Listing Item** gombra.
2. Helyezz el egy **Dynamic Field** blokkot. A forrás maradjon „Bejegyzés/kifejezés/felhasználó/objektum adatai”, a **Post Object** listában keresd meg a Sub Query nevét, és építsd fel az elrendezést.
3. Mentsd a sablont.

## A fő listázás

A fő sablon a végpont többi tulajdonságát mutatja.

1. Vegyél fel új listázási elemet a **JetEngine → Listázások/komponensek** oldalon. A **Listing Source** legyen „REST API Endpoint”, ha nem készítettél REST API lekérdezést, vagy „Lekérdezéskészítő”, ha igen. A blokkszerkesztős változatban ugyanez a beállítás.
2. Ha a forrás a Lekérdezéskészítő, az **Object Field** listában keresd meg az egyedi lekérdezés nevét, és válassz egy mezőt. Ha a mező nem jelenik meg a listában, írd be kézzel az **OBJECT FIELD / META FIELD / REPEATER KEY / COMPONENT PROP** mezőbe.
3. Helyezz el egy **Listing Grid** widgetet (blokkot), és ezzel jelenítsd meg a korábban létrehozott beágyazott listázásokat.

A Listing Grid egyedi lekérdezés fülén nem kell megadni a Sub Query-t: a listázás a sablon forrásául szolgáló egyedi lekérdezésből dolgozik.

Végül tedd a fő listázást arra az oldalra vagy sablonra, ahol a REST API adatot látni akarod. A fő listázás a beágyazott listázásokkal együtt a szülő tulajdonság elemeit is kiírja.