Quick introduction to JSON

1. JSON in 5 slices
Hendrik Van Belleghem
Vlaanderen.pm

2. JSON in 5 slices
Hendrik Van Belleghem
Vlaanderen.pm

3. What is JSON?

4. What is JSON?

5. What is JSON?
• Obviously not Perl!

6. What is JSON?
• Obviously not Perl!
• Poor man’s (Javascript’s) data serialization

7. What is JSON?
• Obviously not Perl!
• Poor man’s (Javascript’s) data serialization
• Complex data structures

8. What is JSON?
• Obviously not Perl!
• Poor man’s (Javascript’s) data serialization
• Complex data structures
• Can be eval’ed

9. What is JSON?
• Obviously not Perl!
• Poor man’s (Javascript’s) data serialization
• Complex data structures
• Can be eval’ed
• Human readable

10. What is JSON?
• Obviously not Perl!
• Poor man’s (Javascript’s) data serialization
• Complex data structures
• Can be eval’ed
• Human readable
• Hotter than Megan Fox’ pants!

12. The Plot

13. The Plot

14. The Plot
var Plot = { "Location": "Crystal Lake", // Hash
"Killers": [ "Mrs Voorhees", "Jason Voorhees", "Roy Burns" ], // Hash with array
"Synopsis": "Guy with hockey mask kills people who visit Crystal Lake",
"How To Kill": // Hash with hash ; Name contains spaces ;-)
{ "Mrs Voorhees": "Decapitate",
"Jason Voorhees": [ "Machete", "Axe to the head", "Drowning", // Array
"Dragged underwater", "Melted by toxic waste", // within
"Stabbed with Mystical Dagger", "Ejected into space" // hash
],
"Roy Burns": "Steel spikes"
},
"Lessons Learned": "Don't have sex when you visit Crystal Lake"
}

15. The Twist

16. The Twist

17. The Twist
document.write(Plot.Location); // Standard naming
document.write(Plot.Synopsis); // Standard naming

18. The Twist
document.write(Plot.Location); // Standard naming
document.write(Plot.Synopsis); // Standard naming

19. The Twist
document.write(Plot.Location); // Standard naming
document.write(Plot.Synopsis); // Standard naming
// Iterate through array
for(i=0; i < Plot.Killers.length ; i++) // Who are the killers?
{ document.write(document.write(Plot.Killers[i]);); }

20. The Twist
document.write(Plot.Location); // Standard naming
document.write(Plot.Synopsis); // Standard naming
// Iterate through array
for(i=0; i < Plot.Killers.length ; i++) // Who are the killers?
{ document.write(document.write(Plot.Killers[i]);); }

21. The Twist
document.write(Plot.Location); // Standard naming
document.write(Plot.Synopsis); // Standard naming
// Iterate through array
for(i=0; i < Plot.Killers.length ; i++) // Who are the killers?
{ document.write(document.write(Plot.Killers[i]);); }
// No standard naming possible, use [ “ “ ] to read how to kill Mrs Voorhees
document.write(Plot["How To Kill"]["Mrs Voorhees"]);

22. The Twist
document.write(Plot.Location); // Standard naming
document.write(Plot.Synopsis); // Standard naming
// Iterate through array
for(i=0; i < Plot.Killers.length ; i++) // Who are the killers?
{ document.write(document.write(Plot.Killers[i]);); }
// No standard naming possible, use [ “ “ ] to read how to kill Mrs Voorhees
document.write(Plot["How To Kill"]["Mrs Voorhees"]);

23. The Twist
document.write(Plot.Location); // Standard naming
document.write(Plot.Synopsis); // Standard naming
// Iterate through array
for(i=0; i < Plot.Killers.length ; i++) // Who are the killers?
{ document.write(document.write(Plot.Killers[i]);); }
// No standard naming possible, use [ “ “ ] to read how to kill Mrs Voorhees
document.write(Plot["How To Kill"]["Mrs Voorhees"]);
// Array within array..
// OMGWTFBBQ He's alive!!?! How do I kill Jason??
for(i=0; i < Plot["How To Kill"]["Jason Voorhees"].length ; i++)
{ document.write(Plot["How To Kill"]["Jason Voorhees"][i]); }

24. The Twist
document.write(Plot.Location); // Standard naming
document.write(Plot.Synopsis); // Standard naming
// Iterate through array
for(i=0; i < Plot.Killers.length ; i++) // Who are the killers?
{ document.write(document.write(Plot.Killers[i]);); }
// No standard naming possible, use [ “ “ ] to read how to kill Mrs Voorhees
document.write(Plot["How To Kill"]["Mrs Voorhees"]);
// Array within array..
// OMGWTFBBQ He's alive!!?! How do I kill Jason??
for(i=0; i < Plot["How To Kill"]["Jason Voorhees"].length ; i++)
{ document.write(Plot["How To Kill"]["Jason Voorhees"][i]); }

25. The Twist
document.write(Plot.Location); // Standard naming
document.write(Plot.Synopsis); // Standard naming
// Iterate through array
for(i=0; i < Plot.Killers.length ; i++) // Who are the killers?
{ document.write(document.write(Plot.Killers[i]);); }
// No standard naming possible, use [ “ “ ] to read how to kill Mrs Voorhees
document.write(Plot["How To Kill"]["Mrs Voorhees"]);
// Array within array..
// OMGWTFBBQ He's alive!!?! How do I kill Jason??
for(i=0; i < Plot["How To Kill"]["Jason Voorhees"].length ; i++)
{ document.write(Plot["How To Kill"]["Jason Voorhees"][i]); }
// And finally, what have we learned of this carnage?
document.write(Plot.["Lessons Learned"]);

26. The End!

27. The End!

28. The End!
• Square brackets are for arrays

29. The End!
• Square brackets are for arrays
• except when you’re using non-standard names

30. The End!
• Square brackets are for arrays
• except when you’re using non-standard names
• Curly braces are for hash-like structures

31. The End!
• Square brackets are for arrays
• except when you’re using non-standard names
• Curly braces are for hash-like structures
• Use colons to separate names and values

32. The End!
• Square brackets are for arrays
• except when you’re using non-standard names
• Curly braces are for hash-like structures
• Use colons to separate names and values
• Separate elements with a comma

33. The End!
• Square brackets are for arrays
• except when you’re using non-standard names
• Curly braces are for hash-like structures
• Use colons to separate names and values
• Separate elements with a comma
• Don't have sex when you visit Crystal Lake!