Een korte kennismaking met JSON, de voordelen tegenover XML en enkele praktische toepassingen.

1. JSON
fat-free, independent & self-describing
1 Karel Persoons

2. Introductie
• JSON = JavaScript Object Notation
• Data in tekstvorm
• Subset van Javascript
• Gebaseerd op object-structuur
JSON 2 Karel Persoons

3. Kenmerken
• Fat-free: compact (ivm XML)
• Independent: open systeem
• Self-describing: gemakkelijk te lezen
en te schrijven
JSON 3 Karel Persoons

4. Notatie
• Begint met ‘{’ en eindigt met ‘}’
• Daarin collectie van namen + waarden
• Gescheiden met ‘:’ en herhalen via ‘,’
JSON 4 Karel Persoons

5. Notatie
{
“voornaam”: “Karel”,
“naam”: “Persoons”,
“leeftijd”: 26,
“adres”: {”stad”: “Brugge”, ...},
“talen”: [”nl”, “en”, ...],
“getrouwd”: false,
“kinderen”: null
}
JSON 5 Karel Persoons

6. String
“voornaam”: “Karel”,
• Tekst tussen dubbele
aanhalingstekens
• Speciale -escapement
JSON 6 Karel Persoons

7. Integer
“leeftijd”: 26,
• Getallen
• Decimalen via ‘.’
• Geen bewerkingen
JSON 7 Karel Persoons

8. Object
“adres”: {”stad”: “Brugge”, ...},
• Dezelfde eigenschappen als JSON zelf
• Leesbaarheid
JSON 8 Karel Persoons

9. Array
“talen”: [”nl”, “en”, ...],
• Herhaling, reeks, lijst, ...
• Leesbaarheid
JSON 9 Karel Persoons

10. Object vs. Array
verwijzing naar verwijzing naar
waarde moet een waarde moet er niet
‘string’ zijn expliciet zijn
(maar kan wel via index)
data.adres.stad data.talen[0]
JSON 10 Karel Persoons

11. Boolean
“getrouwd”: false
• ‘true’ of ‘false’
• Zonder dubbele aanhalingstekens
• Zeer performant
JSON 11 Karel Persoons

12. Null
“kinderen”: null
• Geen waarde
• Zonder dubbele aanhalingstekens
JSON 12 Karel Persoons

13. Toepassingen
• API (Facebook, Google, ...)
• AJAX-request naar eigen server
• Configuratie
JSON 13 Karel Persoons

14. Voorbeeld
In de volgende voorbeeld applicatie
wordt een lijst van alle (8645) winnaars
ingeladen via een bestand (AJAX-
request)
JSON 14 Karel Persoons

15. Via XML
<?xml version="1.0" encoding="utf-8"?>
<WINNAARS>
<WNR>
<NM>Jansen</NM>
<VNM>Jan</VNM>
<WPL>Lokeren</WPL>
</WNR>
...
</WINNAARS>
JSON 15 Karel Persoons

16. Via JSON
{
“WINNAARS”: [
{
“NM”: “Jansen”,
“VNM”: “Jan”,
“WPL”: “Lokeren”
},
...
]
}
JSON 16 Karel Persoons

17. Bestandsgrootte
XML JSON
1.000 KB
750 KB
500 KB 560 KB
420 KB
250 KB
0 KB
JSON 17 Karel Persoons

18. Laadtijd
XML* JSON
4s
3s 3,3 s
2s
1s
0s 0,2 s
* XML wordt omgezet naar object
JSON 18 Karel Persoons

19. Code jQuery
$.ajax({
type: ‘GET’,
url: ‘winnaars.json’,
dataType: ‘json’,
success: function(data){
$.each(data, function(index, value){
// loop data here
});
}
});
JSON 19 Karel Persoons

20. Meer info
• $.ajax()
• $.getJSON() (shortcut)
JSON 20 Karel Persoons

21. Opmerking
• Indien tekst: JSON.parse()
• Voor oudere browers: JSON2.js
• Gebruik ‘console.log’!
JSON 21 Karel Persoons

22. Voordelen
• Licht
• Gebruiksvriendelijk
• Stabiel (toekomstgericht)
• Eén versie
JSON 22 Karel Persoons

23. Nadelen
• Geen comments
• Geen validatie
• Mist voordelen van XML (stylesheets,
strict, industriestandaard, ...)
• Eén versie
JSON 23 Karel Persoons

24. Handige tools
• XML to JSON
• JSON validator
• JSON editor / viewer
• JSON report
• Firebug of Developer Tools
JSON 24 Karel Persoons

25. Links
• JSON
• JSON - Wikipedia
JSON 25 Karel Persoons

26. Vragen
• Don’t panic, just ask!
• Mailen naar karel@studiosmeeuw.be
• Stack Overflow (JSON)
JSON 26 Karel Persoons

27. JSON
fat-free, independent & self-describing
Karel Persoons
in opdracht voor Corelio NV
2012
27 Karel Persoons