JavaScript — Introduktion genom exempel

9.3 Tolka XML och JSON

I detta exempel ska vi se hur vi kan tolka XML- och JSON-kodad data, som läses in med fetch. Vi ska alltså ta ut innehållet i datafilen och skapa HTML-kod, som används för att uppdatera webbsidans innehåll.

Sammanfattning

XML

För att komma åt element gör man i stort sett på samma sätt som för HTML. Man utgår från variabeln med XML-koden och använder querySelector() eller querySelectorAll() för att komma åt önskat element. Sedan går man vidare med .textContent, för att avläsa innehållet

För att komma åt attribut använder man getAttribute().

JSON

För att komma åt innehållet i JSON-objektet gör man på samma sätt som visades i föregående kapitel, dvs man utgår från variabeln med JSON-koden och använder punktnotation, för att komma åt egenskaperna.

Egna övningar

I test-programmet finns två knappar. Då man klickar på dessa ska filen sweden.xml respektive sweden.json läsas in. Alla bostäder i filen gås igenom och stadsnamn för de bostäder som är billigare än 3000 kr ska pushas in i en array. Slutligen skrivs arrayen ut.

• I knapparnas händelselyssnare anropas funktionerna requestXML och resuestJSON. Lägg in dessa båda funktioner i koden. Du bör kunna kopiera dem från exempelkoden. Då datan är inläst ska funktionen getDataXML respektive getDataJSON anropas. Funktionerna beskrivs i nästa punkt.
• Skriv funktionen getDataXML, där du deklarerar en lokal variabel towns som en tom array. Gå sedan igenom alla bostäder i XML-koden och ta ut pris och stad. Om priset är lägre än 3000, pushar du in staden i towns. Sist i funktionen skriver du ut towns på webbsidan.
• Ta en kopia på getDataXML och kalla den getDataJSON. Modifiera koden, så att du nu går igenom den inlästa JSON-koden och gör samma sak, dvs skriv ut stadsnamn för de bostäder som är billigare än 3000.