JSON
JSON

JSON

data importeren en verwerken

naar de slides   |   {...}

Terug naar de opdracht JSON data

Inhoudsopgave

JSON logo
veel boeken
Veel boeken ordenen

Leerdoelen {...}

  • JSON notatie
  • HTTPRequest-object
  • JS objecten
    • eigenschappen (properties)
    • methods
  • Importeren JSON
  • forEach() loop door arrays
  • Template literals `string ${variabele} string`
  • Formateren met .toLocaleString()

Een json-bestand

een link naar de Gist van dit JSON-document

HTTPRequest

De basis van een request en het gebruik van eenXMLHttpRequest-object

HET XMLHttpRequest -OBJECT

gebruikte eigenschappen:

  • .readyState
  • .status
  • .responseText

gebruikt event:

  • .onreadystatechange

gebruikte methods:

  • .open()
  • .send()

het maken

  • const naam = new XMLHttpRequest()

    • Object in JavaScript - this-keyword

    Een JS object met 4 properties en 2 methods.
    Let op de interne verwijzing met het key-word this

    1. Kopieer de code en plak ze in de console van je browser.
    2. Roep een propertie aan met: docent.geboortejaar
    3. Roep method aan met docent.stelJeVoor();
    4. Roep method aan met docent.geefLes();

    Stappenplan

    • 01

      JSON aanvullen

      Download JSON en
      voeg een boek toe

    • 02

      Importeer de JSON

      Maak een html-document en koppel er een JS bestand aan.
      Gebruik XMLHTTPRequest-object om de JSON te importeren en in de console te bekijken.

    • 03

      Maak een boeken object

      Deze heeft

      • een data-property, waar een object in komt dat alle JSON-data bevat;
      • en een method, die html uitvoert op de webpagina.

    • 04

      bewerk de uitvoer-method

      De data is niet altijd dierct geschikt voor de weergave voor gebruikers

      en voeg CSS toe zodat de uitvoer naar wens is

      naar de instructies   |   {...}

    filter

    filter een array op de eigenschap van de objecten daarbinnen for-lus

        let steden = [
        {stad: 'Alkmaar', inwoners: 94958},
        {stad: 'Amsterdam', inwoners: 862965},
        {stad: 'Eindhoven', inwoners: 231642},
        {stad: 'Hoorn', inwoners: 71567},
        {stad: 'Hilversum', inwoners: 86279}
    ];
                    
        let groteSteden = [];
    for (let i = 0; i < steden.length; i++) {
        if (steden[i].inwoners > 100000) {
            groteSteden.push(steden[i]);
        }
    }
    console.log(groteSteden);

    uitvoer: 

        [
        {stad: 'Amsterdam', inwoners: 862965},
        {stad: 'Eindhoven', inwoners: 231642}
    ]
    filter

    filter een array op de eigenschap van de objecten daarbinnen .filter()

        let steden = [
        {stad: 'Alkmaar', inwoners: 94958},
        {stad: 'Amsterdam', inwoners: 862965},
        {stad: 'Eindhoven', inwoners: 231642},
        {stad: 'Hoorn', inwoners: 71567},
        {stad: 'Hilversum', inwoners: 86279}
    ];
        
        let groteSteden = steden.filter( function( plaats ) {
        return plaats.inwoners > 100000;
    });

    console.log(groteSteden);

    uitvoer: 

        [
        {stad: 'Amsterdam', inwoners: 862965},
        {stad: 'Eindhoven', inwoners: 231642}
    ]
    filter

    filter een array met .filter() en phat arrow =>

        let steden = [
        {stad: 'Alkmaar', inwoners: 94958},
        {stad: 'Amsterdam', inwoners: 862965},
        {stad: 'Eindhoven', inwoners: 231642},
        {stad: 'Hoorn', inwoners: 71567},
        {stad: 'Hilversum', inwoners: 86279}
    ];
        
    let groteSteden = steden.filter( stad => stad.inwoners > 100000 );

console.log(groteSteden);

    uitvoer: 

        [
        {stad: 'Amsterdam', inwoners: 862965},
        {stad: 'Eindhoven', inwoners: 231642}
    ]

    sorteer een array van objecten .sort

                let schoenen = [
                {"merk": "Gabor", "kleur": "blauw", "maat": 42},
                {"merk": "Ecco", "kleur": "zwart", "maat": 43},
                {"merk": "Nubbic", "kleur": "bruin", "maat": 41},
                {"merk": "Santa Cruz", "kleur": "wit", "maat": 42},
                {"merk": "Gary", "kleur": "beige", "maat": 41}
         ]
        
                schoenen = schoenen.sort( (a,b) => {
                if (a.maat > b.maat) return 1;
                else return -1;
              });
              console.log (schoenen)

    uitvoer: 

        [
        {merk: "Gary", kleur: "beige", maat: 41}
        {merk: "Nubbic", kleur: "bruin", maat: 41}
        {merk: "Santa Cruz", kleur: "wit", maat: 42}
        {merk: "Gabor", kleur: "blauw", maat: 42}
        {merk: "Ecco", kleur: "zwart", maat: 43}
    ]

    sorteer een array van objecten .sort() met ternary operator 

                let schoenen = [
                {"merk": "Gabor", "kleur": "blauw", "maat": 42},
                {"merk": "Ecco", "kleur": "zwart", "maat": 43},
                {"merk": "Nubbic", "kleur": "bruin", "maat": 41},
                {"merk": "Santa Cruz", "kleur": "wit", "maat": 42},
                {"merk": "Gary", "kleur": "beige", "maat": 41}
         ]
        
    schoenen = schoenen.sort((a,b) => (a.maat > b.maat) ? 1 : -1);
console.log (schoenen);

    uitvoer: 

        [
        {merk: "Gary", kleur: "beige", maat: 41}
        {merk: "Nubbic", kleur: "bruin", maat: 41}
        {merk: "Santa Cruz", kleur: "wit", maat: 42}
        {merk: "Gabor", kleur: "blauw", maat: 42}
        {merk: "Ecco", kleur: "zwart", maat: 43}
    ]