Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JSONfat-free, independent & self-describing                   1                 Karel Persoons
Introductie  • JSON = JavaScript Object Notation  • Data in tekstvorm  • Subset van Javascript  • Gebaseerd op object-stru...
Kenmerken  • Fat-free: compact (ivm XML)  • Independent: open systeem  • Self-describing: gemakkelijk te lezen       en te...
Notatie  • Begint met ‘{’ en eindigt met ‘}’  • Daarin collectie van namen + waarden  • Gescheiden met ‘:’ en herhalen via...
Notatie  {       “voornaam”: “Karel”,       “naam”: “Persoons”,       “leeftijd”: 26,       “adres”: {”stad”: “Brugge”, .....
String  “voornaam”: “Karel”,  • Tekst tussen dubbele       aanhalingstekens  • Speciale -escapementJSON                   ...
Integer  “leeftijd”: 26,  • Getallen  • Decimalen via ‘.’  • Geen bewerkingenJSON                    7   Karel Persoons
Object  “adres”: {”stad”: “Brugge”, ...},  • Dezelfde eigenschappen als JSON zelf  • LeesbaarheidJSON                  8  ...
Array  “talen”: [”nl”, “en”, ...],  • Herhaling, reeks, lijst, ...  • LeesbaarheidJSON                     9         Karel...
Object vs. Array   verwijzing naar             verwijzing naar   waarde moet een            waarde moet er niet     ‘strin...
Boolean  “getrouwd”: false  • ‘true’ of ‘false’  • Zonder dubbele aanhalingstekens  • Zeer performantJSON                 ...
Null  “kinderen”: null  • Geen waarde  • Zonder dubbele aanhalingstekensJSON                  12              Karel Persoons
Toepassingen  • API (Facebook, Google, ...)  • AJAX-request naar eigen server  • ConfiguratieJSON                  13     ...
Voorbeeld    In de volgende voorbeeld applicatie   wordt een lijst van alle (8645) winnaars     ingeladen via een bestand ...
Via XML  <?xml version="1.0" encoding="utf-8"?>  <WINNAARS>     <WNR>         <NM>Jansen</NM>         <VNM>Jan</VNM>      ...
Via JSON  {       “WINNAARS”: [          {              “NM”: “Jansen”,              “VNM”: “Jan”,              “WPL”: “Lo...
Bestandsgrootte                     XML     JSON        1.000 KB         750 KB         500 KB    560 KB                  ...
Laadtijd                    XML*          JSON       4s       3s         3,3 s       2s       1s       0s                 ...
Code jQuery  $.ajax({      type: ‘GET’,      url: ‘winnaars.json’,      dataType: ‘json’,      success: function(data){   ...
Meer info  • $.ajax()  • $.getJSON() (shortcut)JSON                 20      Karel Persoons
Opmerking  • Indien tekst: JSON.parse()  • Voor oudere browers: JSON2.js  • Gebruik ‘console.log’!JSON                  21...
Voordelen  • Licht  • Gebruiksvriendelijk  • Stabiel (toekomstgericht)  • Eén versieJSON                 22         Karel ...
Nadelen  • Geen comments  • Geen validatie  • Mist voordelen van XML (stylesheets,       strict, industriestandaard, ...) ...
Handige tools  • XML to JSON  • JSON validator  • JSON editor / viewer  • JSON report  • Firebug of Developer ToolsJSON   ...
Links  • JSON  • JSON - WikipediaJSON                   25   Karel Persoons
Vragen  • Don’t panic, just ask!  • Mailen naar karel@studiosmeeuw.be  • Stack Overflow (JSON)JSON                  26    ...
JSONfat-free, independent & self-describing             Karel Persoons       in opdracht voor Corelio NV                  ...
Upcoming SlideShare
Loading in …5
×

JSON - fat-free, independent & self-describing

1,388 views

Published on

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

Published in: Technology
  • Be the first to comment

JSON - fat-free, independent & self-describing

  1. 1. JSONfat-free, independent & self-describing 1 Karel Persoons
  2. 2. Introductie • JSON = JavaScript Object Notation • Data in tekstvorm • Subset van Javascript • Gebaseerd op object-structuurJSON 2 Karel Persoons
  3. 3. Kenmerken • Fat-free: compact (ivm XML) • Independent: open systeem • Self-describing: gemakkelijk te lezen en te schrijvenJSON 3 Karel Persoons
  4. 4. Notatie • Begint met ‘{’ en eindigt met ‘}’ • Daarin collectie van namen + waarden • Gescheiden met ‘:’ en herhalen via ‘,’JSON 4 Karel Persoons
  5. 5. Notatie { “voornaam”: “Karel”, “naam”: “Persoons”, “leeftijd”: 26, “adres”: {”stad”: “Brugge”, ...}, “talen”: [”nl”, “en”, ...], “getrouwd”: false, “kinderen”: null }JSON 5 Karel Persoons
  6. 6. String “voornaam”: “Karel”, • Tekst tussen dubbele aanhalingstekens • Speciale -escapementJSON 6 Karel Persoons
  7. 7. Integer “leeftijd”: 26, • Getallen • Decimalen via ‘.’ • Geen bewerkingenJSON 7 Karel Persoons
  8. 8. Object “adres”: {”stad”: “Brugge”, ...}, • Dezelfde eigenschappen als JSON zelf • LeesbaarheidJSON 8 Karel Persoons
  9. 9. Array “talen”: [”nl”, “en”, ...], • Herhaling, reeks, lijst, ... • LeesbaarheidJSON 9 Karel Persoons
  10. 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. 11. Boolean “getrouwd”: false • ‘true’ of ‘false’ • Zonder dubbele aanhalingstekens • Zeer performantJSON 11 Karel Persoons
  12. 12. Null “kinderen”: null • Geen waarde • Zonder dubbele aanhalingstekensJSON 12 Karel Persoons
  13. 13. Toepassingen • API (Facebook, Google, ...) • AJAX-request naar eigen server • ConfiguratieJSON 13 Karel Persoons
  14. 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. 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. 16. Via JSON { “WINNAARS”: [ { “NM”: “Jansen”, “VNM”: “Jan”, “WPL”: “Lokeren” }, ... ] }JSON 16 Karel Persoons
  17. 17. Bestandsgrootte XML JSON 1.000 KB 750 KB 500 KB 560 KB 420 KB 250 KB 0 KBJSON 17 Karel Persoons
  18. 18. Laadtijd XML* JSON 4s 3s 3,3 s 2s 1s 0s 0,2 s * XML wordt omgezet naar objectJSON 18 Karel Persoons
  19. 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. 20. Meer info • $.ajax() • $.getJSON() (shortcut)JSON 20 Karel Persoons
  21. 21. Opmerking • Indien tekst: JSON.parse() • Voor oudere browers: JSON2.js • Gebruik ‘console.log’!JSON 21 Karel Persoons
  22. 22. Voordelen • Licht • Gebruiksvriendelijk • Stabiel (toekomstgericht) • Eén versieJSON 22 Karel Persoons
  23. 23. Nadelen • Geen comments • Geen validatie • Mist voordelen van XML (stylesheets, strict, industriestandaard, ...) • Eén versieJSON 23 Karel Persoons
  24. 24. Handige tools • XML to JSON • JSON validator • JSON editor / viewer • JSON report • Firebug of Developer ToolsJSON 24 Karel Persoons
  25. 25. Links • JSON • JSON - WikipediaJSON 25 Karel Persoons
  26. 26. Vragen • Don’t panic, just ask! • Mailen naar karel@studiosmeeuw.be • Stack Overflow (JSON)JSON 26 Karel Persoons
  27. 27. JSONfat-free, independent & self-describing Karel Persoons in opdracht voor Corelio NV 2012 27 Karel Persoons

×