$.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

★ Open ajaxLokaal/data/bloemen1.json en ajaxLokaal/json1.html. ★ Bekijk de broncode en test het resultaat in een browser.

Het JSON-object bevat vijf waardes.

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

<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

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

★ Open ajaxLokaal/data/bloemen2.json en ajaxLokaal/json2.html. ★ Bekijk de broncode en test het resultaat in een browser.

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

[
    {"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"}
]

<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

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

★ Open ajaxLokaal/data/bloemen3.json en ajaxLokaal/json3.html. ★ Bekijk de broncode en test het resultaat in een browser. ★ Bekijk de JSON-structuur.

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

<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