Javascript demo 4

Javascript-demo 4, json

Demon asiat käydään yhdessä tunnilla. Tarkoitus on tehdä yksi tiedosto johon lisätään pikku hiljaa demon osatehtävät. Aloita uusi tiedosto, tallenna se kansioon demot nimellä jsdemo4.html. Tee javascript omaan tiedostoon jsdemo4.js. Lähdemateriaalina käytetään w3schoolin javascript-materiaalia.

JSON (JavaScript Object Notation) on merkintätapa jolla voidaan helposti tallettaa tietoa. JSON on usein korvannut XML-merkintätavan.

Esimerkki JSON-tiedostosta

{
        "nimi": "aku ankka",
        "ikä": 100,
        "puhelin": "03 131313",
        "huollettavat": [{
                "nimi": "Hupu"
            },
            {
                "nimi": "Tupu"
            },
            {
                "nimi": "Lupu"
            }
        ]
    }

1. Muunnos JavaScriptiksi, JSON.parse

Lue seuraavan JSON -objektin arvot ja tulosta ne div-elementin sisälle.

{"nimi": "Pekka", "ika": 25, "maa": "Suomi"}

Jos json on merkkijonon sisällä niin sinun tulee parsettaa tieto näin:

let obj = JSON.parse(json)

2. Muunnos JSONiksi

Joskus joudutaan muuttamaan taulukoita JSON-muotoon, silloin käytetään JSON.stringify()-metodia.

Muunna taulukon sisältö json-muotoon ja tulosta se alertin avulla.

var arr = ["Omena", "Banaani", "Mango", "Appelisiini", "Papaija"];

Tieto näyttää taulukolta mutta on merkkijono, se voidaan esimerkiksi tallettaa merkkijonona tiedostoon tms.

3. Kirjaluettelo listaksi

Luo kirjaluettelo JSONilla ja lue se html-listaan.

Kun luot luettelon, validoi sen jsonlint.comissa