JSON begrijpen

JSON (JavaScript Object Notation, dat ik "Jason" uitspreek en u kunt uitspreken zoals u het wilt) is een op tekst gebaseerd gegevensformaat dat is ontworpen om door mensen leesbaar, lichtgewicht en gemakkelijk te verzenden is tussen een server en een webclient. De syntaxis is afgeleid van JavaScript - vandaar de naam - maar het kan in de meeste talen worden gebruikt, inclusief AS3 en C #.


arrays

Als je veel hebt gedaan met programmeren, kom je eerder arrays tegen: verzamelingen items die elk aan een specifiek geheel getal zijn toegewezen.

In JSON zou een reeks van de eerste zes letters van het alfabet als volgt worden weergegeven:

 ["a", "b", "c", "d", "e", "f"]

AS3- en JavaScript-codeerders zullen de bovenstaande lijst zeer vertrouwd vinden. Het lijkt op de C # manier om een ​​array te definiëren.

Zoals je waarschijnlijk wel kunt raden, zeggen de vierkante haken "dit is een array", en komma's worden gebruikt om verschillende elementen te scheiden (merk op dat er geen komma is na het laatste element). Ervan uitgaande dat de taal waarin u de JSON analyseert op nul gebaseerde arrays (en hoeveel talen) gebruikt niet doen, deze dagen?), zal element 0 "a" zijn, 1 zal "b" zijn, 2 zal "c" zijn, enzovoort.

Om arrays gemakkelijker leesbaar te maken, zullen we ze vaak schrijven met extra nieuwe regels en inspringen:

 ["a", "b", "c", "d", "e", "f"]

Merk op dat er na het laatste element nog steeds geen komma is, dus het ziet er nu een beetje vreemd uit.

We hoeven geen strings te gebruiken als elementen van een JSON-array; we kunnen ook nummers gebruiken, waar, vals, en nul. Er is geen strikt typen, wat betekent dat je de soorten waarden kunt mixen die je in een willekeurige array gebruikt. Dit is bijvoorbeeld volkomen geldig:

 ["apple", 3, 912, null, -7.2222202, "#", true, false]

Merk op dat u dubbele aanhalingstekens moet gebruiken (") om al uw snaren te omringen; enkele aanhalingstekens (') zijn niet toegestaan. Ja, dit is het geval, ook al kunt u met behulp van JavaScript strings in beide soorten citaten invoegen. Als u dubbele aanhalingstekens in JSON-reeksen wilt gebruiken, gebruikt u \" in plaats daarvan.


Voorwerpen

Een array is een verzameling items waarvan elk is toegewezen aan een specifiek geheel getal. Een object is een verzameling items waarvan elke aan een specifieke is toegewezen draad. De items worden genoemd waarden, en de strings die worden gebruikt om ze te identificeren worden genoemd sleutels. Sommige programmeertalen noemen dit soort gegevensstructuur a hashtafel of hash kaart.

We kunnen de leeftijd van mensen weergeven in een object zoals:

 "Alan": 44, "John": 58, "Brian": 19, "Eliza": 4, "Jessie": 58

Krullende accolades zeggen "dit is een object", en - zoals bij arrays - scheiden komma's verschillende elementen. De elementen worden echter vermeld paren, deze keer. Het is gemakkelijker om te zien of we een aantal nieuwe regels en inspringingen toevoegen:

 "Alan": 44, "John": 58, "Brian": 19, "Eliza": 4, "Jessie": 58

In elk paar scheidt een dubbele punt de sleutel (wat een tekenreeks is) van de waarde (in dit geval een getal). Toen we een array maakten, hoefden we niet op te geven aan welk geheel getal elk element was toegewezen (dwz we hoefden alleen de waarden te specificeren en niet de sleutels), omdat ze waren toegewezen op basis van de volgorde waarin ze waren geschreven de array.

In plaats van het tweede of vijfde element op te vragen, zoals bij het openen van een array, met een object, vraagt ​​u het element "Alan" of "Eliza" aan.

Om dingen nog verwarrender te maken, laten objecten je ook toe om strings te gebruiken als de waarden - niet alleen de toetsen. Dus je zou een object als dit kunnen hebben:

 "Activetuts +": "http://active.tutsplus.com/", "Psdtuts +": "http://psd.tutsplus.com/", "Nettuts +": "http://net.tutsplus.com/ "," Aetuts + ":" http://ae.tutsplus.com/ "," Vectortuts + ":" http://vector.tutsplus.com/ "," Audiotuts + ":" http://audio.tutsplus.com / "," Cgtuts + ":" http://cg.tutsplus.com/ "," Phototuts + ":" http://photo.tutsplus.com/ "," Webdesigntuts + ":" http: //webdesign.tutsplus. com / "," Mobiletuts + ":" http://mobile.tutsplus.com/ "

Op deze manier kunt u de URL voor een bepaalde Tuts + -site opvragen door de naam van de site als sleutel te gebruiken. Het omgekeerde is echter niet waar - u kunt "http://cg.tutsplus.com/" niet gebruiken om "Cgtuts +" op te halen.

Dezelfde regels voor verschillende soorten aanhalingstekens zijn van toepassing op objecten als arrays. Objecten kunnen ook strings, getallen gebruiken, waar, vals, en nul als waarden (maar alleen tekenreeksen als sleutels).


nesting

Objecten en arrays kunnen ook andere objecten en arrays opslaan. Hiermee kunnen we geneste gegevensstructuren maken; bijvoorbeeld:

 "Activetuts +": "url": "http://active.tutsplus.com/", "hasPremium": true, "Psdtuts +": "url": "http://psd.tutsplus.com/ "," hasPremium ": true," Nettuts + ": " url ":" http://net.tutsplus.com/ "," hasPremium ": true," Aetuts + ": " url ":" http: //ae.tutsplus.com/ "," hasPremium ": true," Vectortuts + ": " url ":" http://vector.tutsplus.com/ "," hasPremium ": true," Audiotuts + ": "url": "http://audio.tutsplus.com/", "hasPremium": true, "Cgtuts +": "url": "http://cg.tutsplus.com/", "hasPremium" : true, "Phototuts +": "url": "http://photo.tutsplus.com/", "hasPremium": true, "Webdesigntuts +": "url": "http: //webdesign.tutsplus .com / "," hasPremium ": false," Mobiletuts + ": " url ":" http://mobile.tutsplus.com/ "," hasPremium ": false

Laten we dat eens bekijken met een beetje meer witruimte:

 "Activetuts +": "url": "http://active.tutsplus.com/", "hasPremium": true, "Psdtuts +": "url": "http://psd.tutsplus.com/ "," hasPremium ": true," Nettuts + ": " url ":" http://net.tutsplus.com/ "," hasPremium ": true," Aetuts + ": " url ":" http: //ae.tutsplus.com/ "," hasPremium ": true," Vectortuts + ": " url ":" http://vector.tutsplus.com/ "," hasPremium ": true," Audiotuts + ": "url": "http://audio.tutsplus.com/", "hasPremium": true, "Cgtuts +": "url": "http://cg.tutsplus.com/", "hasPremium" : true, "Phototuts +": "url": "http://photo.tutsplus.com/", "hasPremium": true, "Webdesigntuts +": "url": "http: //webdesign.tutsplus .com / "," hasPremium ": false," Mobiletuts + ": " url ":" http://mobile.tutsplus.com/ "," hasPremium ": false

Elk object bevat twee velden: een met de sleutel "URL" waarvan de waarde een tekenreeks is met de URL van de site en een met de sleutel hasPremium waarvan de waarde een Booleaanse waarde is, geldt als de site een Premium-sectie heeft.

We zijn echter niet beperkt tot het hebben van exact dezelfde structuur voor elk object in de JSON. We kunnen bijvoorbeeld een extra URL toevoegen die verwijst naar de URL van het Premium-programma, maar alleen voor die sites die er één hebben:

 "Activetuts +": "url": "http://active.tutsplus.com/", "hasPremium": true, "premiumUrl": "http://tutsplus.com/Premium-program/active-Premium/ "," Psdtuts + ": " url ":" http://psd.tutsplus.com/ "," hasPremium ": true," premiumUrl ":" http://tutsplus.com/Premium-program/psd- Premium / "," Nettuts + ": " url ":" http://net.tutsplus.com/ "," hasPremium ": true," premiumUrl ":" http://tutsplus.com/Premium-program/ net-Premium / "," Aetuts + ": " url ":" http://ae.tutsplus.com/ "," hasPremium ": true," premiumUrl ":" http://tutsplus.com/Premium- programma / ae-Premium / "," Vectortuts + ": " url ":" http://vector.tutsplus.com/ "," hasPremium ": true," premiumUrl ":" http://tutsplus.com/ Premium-programma / vector-Premium / "," Audiotuts + ": " url ":" http://audio.tutsplus.com/ "," hasPremium ": true," premiumUrl ":" http: // tutsplus. com / Premium-programma / audio-Premium / "," Cgtuts + ": " url ":" http://cg.tutsplus.com/ "," hasPremium ": true," premiumUrl ":" http: // tutsplus.com/Premium-program/cg-Premium/ "," Phototuts + ": " url " : "http://photo.tutsplus.com/", "hasPremium": true, "premiumUrl": "http://tutsplus.com/Premium-program/photo-Premium/", "Webdesigntuts +": " url ":" http://webdesign.tutsplus.com/ "," hasPremium ": false," Mobiletuts + ": " url ":" http://mobile.tutsplus.com/ "," hasPremium ": false 

We zouden zelfs een hele reeks van de nieuwste Premium-handleidingen voor een bepaalde site kunnen opnemen (ik zal hier Activetuts + laten zien en het beperken tot een paar Premiums om ruimte te besparen):

 "Activetuts +": "url": "http://active.tutsplus.com/", "hasPremium": true, "premiumUrl": "http://tutsplus.com/Premium-program/active-Premium/ "" previousPremiums ": [" http://tutsplus.com/join/ "," http://active.tutsplus.com/tutorials/games/create-a-space-shooter-game-in-flash-using- as3http: //tutsplus.com/join/ "," http://active.tutsplus.com/tutorials/games/obscuring-and-revealing-scenes-with-as3http://tutsplus.com/join/ "," http://active.tutsplus.com/tutorials/games/building-a-dynamic-shadow-casting-engine-in-as3http://tutsplus.com/join/ "," http://tutsplus.com/join / "], / ** SNIP! ** / "Mobiletuts +": "url": "http://mobile.tutsplus.com/", "hasPremium": false

Een array is zinvol om de Premiums op te sommen, omdat ik ervan uitga dat elke app die deze gegevens daadwerkelijk leest, alleen maar een lijst met Premium-zelfstudies zal laten zien in plaats van ze te moeten benaderen op basis van hun naam. hoeven niet elk een string-sleutel toe te wijzen.

We zouden dit nog verder kunnen nemen:

 "Activetuts +": "url": "http://active.tutsplus.com/", "premium": "hasPremium": true, "premiumUrl": "http://tutsplus.com/Premium-program / active-Premium / "," previousPremiums ": [" title ":" Aanpasbare Flash Quiz-toepassing maken "," url ":" http://tutsplus.com/join/ ",, " title ": "Maak een Space Shooter-game in Flash met behulp van AS3", "url": "http://active.tutsplus.com/tutorials/games/create-a-space-shooter-game-in-flash-using-as3http:/ /tutsplus.com/join/ ",, " title ":" Scenes verdoezelen en onthullen met AS3 "," url ":" http://active.tutsplus.com/tutorials/games/obscuring-and-revealing- scenes-with-as3http: //tutsplus.com/join/ ",, " title ":" Een Dynamic Shadow Casting Engine bouwen in AS3 "," url ":" http://active.tutsplus.com/tutorials /games/building-a-dynamic-shadow-casting-engine-in-as3http://tutsplus.com/join/ ",, " title ":" Animatie van de Envato Community Podcast "," url ":" http : //tutsplus.com/join/ "], / ** SNIP! ** / "Mobiletuts +": "url": "http://mobile.tutsplus.com/", "premium": "hasPremium": false

Phew! Als we zouden willen kunnen we objecten maken met de namen en profiel-URL's van elke auteur van elke Premium-zelfstudie - kun je erachter komen wat de beste manier is om dat te doen?

Het kan ook handig zijn om arrays in arrays te bewaren; met name voor gaming. Dit kan de huidige lay-out van een Tic-Tac-Toe bord zijn:

 [[1, 2, 0], [0, 1, 0] [0, 2, 1]]

Niet zien? Probeer een aantal witruimte te verwijderen:

 [[1,2,0], [0,1,0], [0,2,1]]

1 is een nul, 2 is een kruising en 0 is een lege ruimte. Nullen winnen! En ik weet zeker dat je kunt zien hoe iets soortgelijks zou kunnen worden gebruikt voor Battleships of Connect 4 of Minesweeper. Zie mijn vorige zelfstudie voor meer informatie over geneste matrices.


JSON gebruiken met verschillende platforms

Omdat JSON zo populair is, zijn er parsers (tools en bibliotheken die één programmeertaal decoderen zodat een andere het kan begrijpen) en generatoren (tools en bibliotheken die het tegenovergestelde doen, de ene programmeertaal in de andere coderen) beschikbaar voor de meeste programmeertalen. Gewoon zoeken [JSON-parser (naam van uw taal]. Ik zal er een paar markeren die relevant zijn voor Activetuts + -lezers.


Voor Flash en AS3

De standaardbibliotheek voor het coderen en decoderen van JSON-gegevens in AS3 is de as3corelib; zie mijn handleiding voor het gebruik van externe bibliotheken als u niet zeker weet hoe u deze moet installeren.

U kunt een JSON-geformatteerde String naar AS3-objecten en arrays decoderen door deze door te geven aan com.adobe.serialization.json.JSON.decode (); de geretourneerde waarde is een array of een object, afhankelijk van de JSON. Als je slaagt vals als een tweede argument zal de decoder de JSON-standaard niet zo strikt volgen, zodat u weg kunt komen met slordiger formatteren.

U kunt een AS3-object of -array (die geneste objecten en arrays kan bevatten) voor een JSON-reeks coderen door deze door te geven aan com.adobe.serialization.json.JSON.encode (); de retourwaarde zal een string zijn.

Er is aangekondigd dat toekomstige versies van Flash native JSON-parsing zullen bevatten, dus het is niet langer nodig om de as3corelib voor dat doel te gebruiken.


Voor .NET (inclusief Silverlight)

Als u JSON wilt parseren, voegt u gewoon een verwijzing toe naar System.Json. Dan:

 #using System.Json; gedecodeerd = JsonValue.Parse (jsonString); // kan een JsonPrimitive, JsonArray of JsonObject zijn, afhankelijk van de doorgegeven JSON

Het is iets gecompliceerder om een ​​object te coderen voor een JSON-tekenreeks. U moet eerst een gegevenscontract maken voor het type object dat u wilt coderen; laten we de onze bellen Ding, en het eigenlijke object mijn ding. Dan:

 #using System.Runtime.Serialization.Json; MemoryStream myStream = nieuwe MemoryStream (); DataContractJsonSerializer jsonEncoder = new DataContractJsonSerializer (typeof (Thing)); jsonEncoder.WriteObject (myStream, myThing); myStream.Position = 0; StreamReader sr = nieuwe StreamReader (myStream); encoded = sr.ReadToEnd ();

U kunt deze methode ook gebruiken om een ​​JSON-tekenreeks te decoderen naar een specifieke klasse van objecten:

 #using System.Runtime.Serialization.Json; myStream.Position = 0; myOtherThing = ser.ReadObject (myStream); // je zou dit als Ding moeten werpen

Zie voor meer informatie de MSDN-pagina's Werken met JSON-gegevens en Hoe: JSON-gegevens serialiseren en deserialiseren.


Voor JavaScript (en dus HTML 5 apps)

U kon geef de JSON-reeks gewoon door aan eval () in JavaScript, maar dit is een vreselijk veiligheidsrisico. De meeste moderne browsers ondersteunen een functie JSON.parse (), die een JSON-tekenreeks in JavaScript-objecten zal parseren, en JSON.stringify (), die een JavaScript-object of array omzet in een JSON-reeks.

Douglas Crockford creëerde een bibliotheek om dit in oudere browsers te doen; het is beschikbaar op github.


Voor eenheid

Er is een C # -assemblage met de naam LitJSON die u in uw Unity-projecten kunt gebruiken om JSON te analyseren en te genereren. U kunt dit gebruiken, zelfs als uw project is geschreven in JavaScript of Boo in plaats van C #.

Om een ​​Unity-object te decoderen naar een JSON-tekenreeks:

 #using LitJson; string jsonString = JsonMapper.ToJson (myObject);

Een JSON-reeks coderen naar een Unity-object van het type Thing:

 #using LitJson; Thing myThing = JsonMapper.ToObject (JsonString);

De LitJSON-handleiding is geweldig; Ik raad aan dat te lezen voor meer begeleiding.


Voor andere talen

JSON.org heeft een lange lijst met bibliotheken voor verschillende platforms en talen - plus, u kunt Google zoeken, zoals hierboven vermeld;)

Die site heeft ook een aantal fantastische visualisaties van hoe JSON kan worden geconstrueerd en veel details die verder gaan dan wat ik in deze korte introductie heb uitgelegd. Bekijk het als je meer wilt weten!