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

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.