JSON mit Blockly einlesen und verarbeiten

Eindimensionales JSON

Beginnen wir mit einem einfachen, eindimensionalen JSON. Ein eindimensionales Array erkennst du daran, dass jeder Array-Index nur eine Daten-Hierarchie enthält.

Zum Test gibt es hierfür einige Seiten, die kostenfreie REST-APIs zur Verfügung stellen. Für dieses Beispiel nutzen wir das JSON der Seite https://jsonplaceholder.typicode.com/posts. In diesem Beispiel befinden sich 100 JSON-Arrays mit jeweils 4 _Keys dazugehörigen _Values:

Mit Request einlesen

Um das obige JSON nun mit Blockly einzulesen, benötigst du einen request-Block aus dem Bereich _Aktionen. Aktiviere mit Ergebnissen und ziehe dir einen debug output-Block aus dem Bereich _System dazu.

Erstelle dann eine unter _Variablen eine neue Variable mit den Namen result und setzte sie an den Eingang des Debug-Blocks:

Dann musst du das Ergebnis result mit dem Block JSON nach Objekt aus dem Bereich _{Konvertierung} in ein Objekt umwandeln:

Wenn du das Script jetzt startest, erhältst du im Log folgendes Debug-Ergebnis:

[ { "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" }, { "userId": 1, "id": 2, "title": "qui est esse", "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla" }, { "userId": 1, "id": 3, "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut", "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut" }, ... ]

Auf Werte zugreifen

Lass uns jetzt auf den title und auf den body der _{ID 3} zugreifen. Dafür benötigst du aus dem Bereich _System den Block Attribut vom Objekt. Diesen steckst du nun an den Debug-Block und setzt den bisherigen Block in den Teil “Objekt”:

Damit du nun auf die gewünschten Werte zugreifen kannst, musst du wissen, an welcher Stelle sich diese im Array befinden. Dafür rufst du die URL aus dem request-Block in deinem Browser auf und siehst dort den Aufbau des JSONs:

Der gesuchte Wert befindet sich an Position 2. Indem du den Attribut-Teil des Blocks Attribut vom Objekt wie folgt befüllst, kannst du also auf die Werte der _Keys title und body zugreifen:

2.title

2.body

Die Debug-Ausgabe im Log sollte dir die beiden gewünschten Werte liefern. Du kannst jetzt die Werte entsprechend weiterverarbeiten:

script.js.common.JSON: (2.title)
ea molestias quasi exercitationem repellat qui ipsa sit aut
script.js.common.JSON: (2.body)
et iusto sed quo iure voluptatem occaecati omnis eligendi aut ad voluptatem doloribus vel accusantium quis pariatur molestiae porro eius odio et labore et velit aut

Mehrdimensionales JSON

Oft wirst du statt dem eindimensionalen JSON, das nur eine Daten-Hierarchie aufweist, ein mehrdimensionales JSON erhalten. Dieses enthält verschachtelte Daten, also neben einfachen _Values weitere Daten-Arrays mit _Keys und _Values. Dieses Daten-Array erkennst du daran, dass sich einige keys erweitern lassen.

Zum Test nutzen wir das JSON der Seite https://jsonplaceholder.typicode.com/users. In diesem Beispiel befinden sich 10 JSON-Arrays mit jeweils 8 _Keys dazugehörigen _Values, wobei sich 2 _keys weitere Daten enthalten:

Mit Request einlesen

Um das obige JSON nun mit Blockly einzulesen, benötigst du einen request-Block aus dem Bereich _Aktionen. Aktiviere mit Ergebnissen und ziehe dir einen debug output-Block aus dem Bereich _System dazu:

Dann musst du das Ergebnis result mit dem Block JSON nach Objekt aus dem Bereich _{Konvertierung} in ein Objekt umwandeln:

Wenn du das Script jetzt startest, erhältst du im Log folgende Debug-Ausgabe:

[{'id':1,'name':'Leanne Graham','username':'Bret','email':'Sincere@april.biz','address':{'street':'Kulas Light','suite':'Apt. 556','city':'Gwenborough','zipcode':'92998-3874','geo':{'lat':'-37.3159','lng':'81.1496'}},'phone':'1-770-736-8031 x56442','website':'hildegard.org','company':{'name':'Romaguera-Crona','catchPhrase':'Multi-layered client-server neural-net','bs':'harness real-time e-markets'}}, ... ]

Auf Werte zugreifen

Lass uns diesmal auf den Wert name des Eintrags _{ID 2} und zusätzlich auf den Eintrag zipcode aus der _address zugreifen. Dafür benötigst du aus dem Bereich _System den Block Attribut vom Objekt. Diesen steckst du nun an den Debug-Block und setzt den bisherigen Block in den Teil “Objekt”:

Damit du nun auf die gewünschten Werte zugreifen kannst, musst du wissen, an welcher Stelle sich diese im Array befinden. Dafür rufst du die URL aus dem request-Block in deinem Browser auf und siehst dort den Aufbau des JSONs:

Der gesuchte Wert befindet sich an Position 1. Indem du den Attribut-Teil des Blocks Attribut vom Objekt wie folgt befüllst, kannst du also auf die Werte der _Keys name und zipcode zugreifen:

1.name

1.address.zipcode

Die Debug-Ausgabe im Log sollte dir die beiden gewünschten Werte liefern. Du kannst jetzt die Werte entsprechend weiterverarbeiten:

script.js.common.JSON: (1.name)
Ervin Howell
script.js.common.JSON: (1.address.zipcode)
90566-7771

Die mit Sternchen (*) gekennzeichneten Links sind sogenannte Affiliate-Links. Wenn du auf so einen Affiliate-Link klickst und über diesen Link einkaufst, bekomme ich von dem betreffenden Online-Shop oder Anbieter eine Provision. Für dich verändert sich der Preis nicht.