# $.getJSON()

Met `$.getJSON()` kunnen we enkel gegevens in JSON-formaat ophalen. Filteren kan enkel via de GET-methode.

Response: JSON en JSONP. Syntax:\
`$.getJSON(url [, data] [, callback]).done(callback).fail(callback).always(callback)`

* **URL**:  

  De URL van het op te halen bestand.
* **Data**:  

  Een string of een map waarmee we de gegevens op de URL kunnen filteren. (Een map wordt binnen de functie automatisch omgezet naar een string.)   

  Aangezien we in dit hoofdstuk geen server-side script gebruiken, kunnen we deze parameter in deze oefeningen nog niet verwerken.
* **Callback**:  

  Deze functie wordt uitgevoerd zodra alle gegevens zijn opgehaald.
* **.done(callback)** (optioneel):  

  Ook deze functie wordt uitgevoerd zodra alle gegevens zijn opgehaald, maar deze bevat GEEN data.
* **.fail(callback)** (optioneel):  

  Deze functie wordt enkel uitgevoerd indien er iets nies loopt (URL niet bereikbaar, timeout, ...).
* **.fail(callback)** (optioneel):  

  Deze functie wordt altijd uitgevoerd.

JSON is een relatief nieuw formaat, maar wint aan populariteit ten opzichte van XML. Daarom gaan we dit formaat iets gedetailleerder bespreken.

Een JSON-object kan enkel waardes bevatten (een *array*) of kan complexe naam/waardeparen (een *object*) bevatten. Elk van deze gegevensstructuren wordt aan de hand van een oefening verduidelijkt.

## $.getJSON(): JSON met een eenvoudige literal array

{% hint style="success" %}
★ Open **ajaxLokaal/data/bloemen1.json** en **ajaxLokaal/json1.html**.\
★ Bekijk de broncode en test het resultaat in een browser.
{% endhint %}

Het JSON-object bevat vijf waardes.

`["Anjer","Lelie","Narcis","Roos","Tulp"]`

```markup
<h2>Aantal items: <span id="aantal"></span> </h2>
<section id="data">
    <ul id="bloemenlijst"></ul>
</section>
...
<script>
$(function () {
    $.getJSON('data/bloemen1.json', function (data) {
        console.log('first success');
        console.log('data', data);
        console.log('data[0]', data[0]);
        $('#aantal').text(data.length);
        $.each(data, function (index, value) {
            $("#bloemenlijst").append('<li>' + this + '</li>\n\t');
        });
    }).done(function () {
        console.log('second success');
    }).fail(function (err) {
        console.log('error', err);
    }).always(function () {
        console.log('complete');
    });
});
</script>
```

*Json1.html* leest de array uit *bloemen1.json*. De parameter *data* in de callback functie bevat de array.

U kan deze waarde van data makkelijk uitlezen.\
Bijvoorbeeld: de code `console.log('data', data);` toont de volledige array in het consolevenster van de browser.

`data.length` berekent het aantal items in de array. Deze waarde wordt achteraan de h2-tag toegevoegd.

De methode `$.each()` doorloopt alle items in de array en plaatst de waarde telkens in een nieuwe li-tag.

Ziehier het resultaat:

![JSON met een eenvoudige literal array](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAX7w2Vgvd3Asf6Slxd%2F-L9sHOczxVoGncftlfUs%2FgetJson1.png?generation=1524212435162166\&alt=media)

## $.getJSON(): JSON met één object

{% hint style="success" %}
★ Open **ajaxLokaal/data/bloemen2.json** en **ajaxLokaal/json2.html**.\
★ Bekijk de broncode en test het resultaat in een browser.
{% endhint %}

Het JSON-object bevat opnieuw informatie over vijf bloemen, maar elke bloem heeft nu een *titel* en een *url*.

```javascript
[
    {"titel": "Anjer","url": "http://nl.wikipedia.org/wiki/Anjer"},
    {"titel": "Lelie","url": "http://nl.wikipedia.org/wiki/Lelie"},
    {"titel": "Narcis","url": "http://nl.wikipedia.org/wiki/Narcis"},
    {"titel": "Roos","url": "http://nl.wikipedia.org/wiki/Rozen"},
    {"titel": "Tulp","url": "http://nl.wikipedia.org/wiki/Tulp"}
]
```

```markup
<h2>Aantal items: <span id="aantal"></span> </h2>
<section id="data">
    <ul id="bloemenlijst"></ul>
</section>
...
<script>
$(function () {
    $.getJSON('data/bloemen2.json', function (data) {
        console.log('data', data);
        console.log('data[0].titel :', data[0].titel);
        $('#aantal').text(data.length);
        $.each(data, function (index, value) {
            $("#bloemenlijst").append('<li><a href="' + this.url + '">' + this.titel + '</a></li>\n\t');
        })
    }).fail(function (err) {
        console.log('error', err);
    });
});
</script>
```

De parameter *data* bevat nu een **array** van vijf **objecten** (zie console).

![JSON met één objecten](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAX7w2Vgvd3Asf6Slxd%2F-L9sHOnmjq4AFZy07kz3%2FgetJson2.png?generation=1524212436963404\&alt=media)

Kijk even terug naar hoofdstuk 2. Binnen een constructor functie verwijst het kernwoord *this* naar het object. Binnen de each-lus lezen we met `this.titel` en `this.url` de waardes van elk object uit en voegen we deze toe aan de lijst *bloemenlijst*.

## $.getJSON(): JSON met meerdere objecten

{% hint style="success" %}
★ Open **ajaxLokaal/data/bloemen3.json** en **ajaxLokaal/json3.html**.\
★ Bekijk de broncode en test het resultaat in een browser.\
★ Bekijk de JSON-structuur.
{% endhint %}

```javascript
{
    "bloemzaden": [
        {"titel": "......","omschrijving": "....."},
        {"titel": "......","omschrijving": "....."},
        ....
    ],
    "bloem": [
        {"titel": "...","foto": "...","url": "...","omschrijving": "..."},
        {"titel": "...","foto": "...","url": "...","omschrijving": "..."},
        ...
    ]
}
```

```markup
<section>
    <ul id="bloemzadenlijst"></ul>
</section>
<section class="sjabloon drop-shadow">
    <h2>titel</h2>
    <img src="../assets/fotos/thumb_roos.jpg">
    <div>Omschrijving</div>
    <p><a href="#">Meer info</a></p>
    <div class="reset"></div>
</section>
...
<script>
    $(function () {
        $.getJSON('data/bloemen3.json', function (data) {
            console.log('data', data);
            console.log('data.bloemzaden', data.bloemzaden);
            console.log('data.bloem', data.bloem);
            console.log('data.bloem[0].titel :', data.bloem[0].titel);
            // bloemzaden
            $.each(data.bloemzaden, function (index, value) {
                $("#bloemzadenlijst").append('<li><strong>' + this.titel + '</strong><br>' + this.omschrijving + '</li>\n\t');
            });
            // bloemen
            $.each(data.bloem, function (index, value) {
                $('.sjabloon').clone()
                    .find('h2').text(this.titel).end()
                    .find('div:first').html(this.omschrijving).end()
                    .find('a').attr('href', this.url).end()
                    .find('img').attr('src', '../assets/fotos/' + this.foto).end()
                    .removeClass('sjabloon').insertBefore('.sjabloon');
            });
            $('.sjabloon').remove();
        }).fail(function (err) {
            console.log('error', err);
        });
    });
</script>
```

De parameter *data* bevat één samengesteld object. De verschillende deelobjecten kan u met de puntnotatie benaderen. `data.bloemzaden` is een array van drie objecten, `data.bloem` een array van vijf objecten.

Het eerste deelobject `data.bloemzaden` wordt, naar analogie met voorgaande oefening, in een lijst getoond.

Om het object `data.bloem` makkelijk te formatteren, maken we gebruik van het sjabloon (de section-tag met class *.sjabloon*). In de each-lus staat maar één statement! Om de code leesbaar te houden, wordt het statement verdeeld over meerdere lijnen.

Binnen de lus maken we een kopie van het sjabloon. De methode `find()` selecteert telkens één element binnen de section-tag en vult deze met de waardes uit het object. Op het einde van de ketting wordt de class *.sjabloon* verwijderd. Na het beëindigen van de lus wordt het originele sjabloon gewist.

Ziehier het resultaat:

![JSON met meerdere objecten](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAX7w2Vgvd3Asf6Slxd%2F-L9sHQWM_B6pAry6sogH%2FgetJson3.png?generation=1524212435983600\&alt=media)