Förstå JSON

JSON (JavaScript Object Notation, som jag uttalar "Jason" och du kan uttala men du vill) är ett textbaserat dataformat som är utformat för att vara läsbart, lätt och enkelt att överföra mellan en server och en webbklient. Dess syntax härstammar från JavaScript - därav namnet - men det kan användas på de flesta språk, inklusive AS3 och C #.


arrayer

Om du har gjort mycket programmering, har du kommit över arrays före: samlingar av objekt, vardera tilldelade ett visst heltal.

I JSON skulle en grupp av de första sex bokstäverna i alfabetet representeras så här:

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

AS3 och JavaScript kodare hittar ovanstående notering mycket bekant. Det liknar C # sättet att definiera en array också.

Som du antagligen kan gissa, säger torget parentes "det här är en matris", och kommatecken används för att skilja olika element (observera att det inte finns några kommatecken efter det sista elementet). Anta att språket där du analyserar JSON använder nollbaserade arrays (och hur många språk inte, dessa dagar?), element 0 kommer att vara "a", 1 kommer att vara "b", 2 kommer att vara "c" och så vidare.

För att göra arrays lättare att läsa skriver vi ofta dem med extra nyhetslinjer och indrag:

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

Observera att det fortfarande inte finns några kommatecken efter det sista elementet, så det ser nu lite udda ut.

Vi behöver inte använda strängar som elementen i en JSON array; vi kan också använda siffror, Sann, falsk, och null. Det finns ingen strikt skrivning, vilket innebär att du kan blanda de typer av värden du använder i ett visst array. Till exempel är detta helt giltigt:

 ["apple", 3, 912, null, -7.2222202, "#", sant, falskt]

Observera att du måste använda dubbla citat (") att omge alla dina strängar; enkla citat (') är inte tillåten. Ja, det här är fallet, även om JavaScript tillåter dig att bifoga strängar i någon typ av citat. Om du vill använda dubbla citat i JSON-strängar, använd \" istället.


Objekt

En matris är en samling objekt där var och en tilldelas ett visst heltal. Ett objekt är en samling objekt där var och en tilldelas ett specifikt sträng. Artiklarna heter värden, och strängarna som används för att identifiera dem kallas nycklar. Vissa programmeringsspråk kallar denna typ av datastruktur a hashbord eller hash karta.

Vi kan representera människors åldrar i ett föremål som så:

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

Curly braces säger "detta är ett objekt", och - som med arrays - komma åt olika element. Emellertid anges elementen i par, den här gången. Det är lättare att se om vi lägger till några nya linjer och indrag:

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

I varje par skiljer ett kolon nyckel (vilket är en sträng) från värdet (vilket i detta fall är ett tal). När vi gjorde en matris behöver vi inte ange vilket heltal varje element tilldelades (dvs. vi behövde bara ange värdena och inte nycklarna), eftersom de tilldelades baserat på den ordning i vilken de skrevs in arrayen.

Snarare än att begära det andra eller femte elementet, som du skulle när du öppnade en matris, med ett objekt, kommer du att begära elementet "Alan" eller "Eliza" th.

För att göra sakerna mer förvirrande låter objekt också använda strängar som värden - inte bara tangenterna. Så du kan ha ett föremål så här:

 "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/ "

På det här sättet, för att hämta webbadressen för en viss Tuts + -sida, kan du begära den med namnet på webbplatsen som en nyckel. Omvänden är dock inte sant - du kan inte använda "http://cg.tutsplus.com/" för att hämta "Cgtuts +".

Samma regler om olika typer av citat gäller för objekt som arrays. Objekt kan också använda strängar, siffror, Sann, falsk, och null som värden (men bara strängar som nycklar).


Nesting

Objekt och arrays kan också lagra andra objekt och arrays. Det här låter oss skapa inbyggda datastrukturer. till exempel:

 "Activetuts +": "url": "http://active.tutsplus.com/", "hasPremium": true, "Psdtuts +": "url": "http://psd.tutsplus.com/ "," hasPremium ": true," Webuts + ": " url ":" http://net.tutsplus.com/ "," hasPremium ": true," Aetuts + ": " url " //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

Låt oss se det med lite mer blankutrymme:

 "Activetuts +": "url": "http://active.tutsplus.com/", "hasPremium": true, "Psdtuts +": "url": "http://psd.tutsplus.com/ "," hasPremium ": true," Webuts + ": " url ":" http://net.tutsplus.com/ "," hasPremium ": true," Aetuts + ": " url " //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

Varje objekt innehåller två fält: ett med nyckeln "URL" vars värde är en sträng som innehåller webbadressen till webbplatsen och en med nyckeln hasPremium vars värde är en booleska som är sant om webbplatsen har en Premium-sektion.

Vi är inte begränsade till att ha exakt samma struktur för varje objekt i JSON, dock. Till exempel kan vi lägga till en extra webbadress som pekar på Premium-programadressen, men endast för de webbplatser som har en:

 "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/ netto-Premium / "," Aetuts + ": " url ":" http://ae.tutsplus.com/ "," hasPremium ": true," premiumUrl ":" http://tutsplus.com/Premium- program / ae-Premium / "," Vectortuts + ": " url ":" http://vector.tutsplus.com/ "," hasPremium ": true," premiumUrl ":" http://tutsplus.com/ Premiumprogram / vektor-Premium / "," Audiotuts + ": " url ":" http://audio.tutsplus.com/ "," hasPremium ": true," premiumUrl ":" http: // tutsplus. com / Premium-program / ljud-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 ": falskt 

Vi kan även inkludera en uppsättning av alla de senaste Premium-handledningarna för en viss webbplats (jag visar bara Activetuts + här och begränsar det till några Premium, för att spara utrymme):

 "Activetuts +": "url": "http://active.tutsplus.com/", "hasPremium": true, "premiumUrl": "http://tutsplus.com/Premium-program/active-Premium/ "" tidigarePremiums ": [" 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

En array är meningsfull för att notera premierna, eftersom jag arbetar med antagandet att en app som faktiskt läser dessa data bara ska visa en lista med Premium-handledning, snarare än att behöva få tillgång till dem enligt deras namn - så vi behöver inte tilldela dem en strängnyckel.

Vi kunde ta detta ännu längre:

 "Activetuts +": "url": "http://active.tutsplus.com/", "premium": "hasPremium": true, "premiumUrl": "http://tutsplus.com/Premium-program / Active-Premium / "," previousPremiums ": [" title ":" Skapa ett anpassningsbart Flash Quiz-program "," url ":" http://tutsplus.com/join/ ",, " title " "Skapa ett Space Shooter-spel i Flash med AS3", "url": "http://active.tutsplus.com/tutorials/games/create-a-space-shooter-game-in-flash-using-as3http:/ /tutsplus.com/join/ ",, " title ":" Obscuring och Revealing Scenes with AS3 "," url ":" http://active.tutsplus.com/tutorials/games/obscuring-and-revealing- scener-med-as3http: //tutsplus.com/join/ ",, " title ":" Bygga en Dynamic Shadow Casting Engine i AS3 "," url ":" http://active.tutsplus.com/tutorials /games/building-a-dynamic-shadow-casting-engine-in-as3http://tutsplus.com/join/ ",, " title ":" Animera Envato Community Podcast "," url ":" http : //tutsplus.com/join/ "], / ** SNIP! ** / "Mobiletuts +": "url": "http://mobile.tutsplus.com/", "premium": "hasPremium": false

Phew! Om vi ​​ville att vi kunde skapa objekt som innehåller namn och profiladresser för varje författare av varje Premium-handledning - kan du räkna ut det bästa sättet att göra det?

Att hålla arrays inom arrays kan också vara användbar. speciellt för spel. Detta kan vara den nuvarande layouten av en Tic-Tac-Toe-bräda:

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

Inte ser det? Prova att ta bort lite blankutrymme:

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

1 är inget, 2 är ett kors och 0 är ett tomt utrymme. Noughts vinna! Och jag är säker på att du kan se hur något liknande kan användas för slagskepp eller Connect 4 eller Minesweeper. För mer information om nestade arrays, kolla in min tidigare handledning.


Använda JSON med olika plattformar

Eftersom JSON är så populär finns det parsers (verktyg och bibliotek som avkodar ett programmeringsspråk så att en annan kan förstå det) och generatorer (verktyg och bibliotek som gör motsatsen, kodar ett programmeringsspråk till ett annat) tillgängligt för de flesta programmeringsspråk. Sök bara [JSON-parser (namnet på ditt språk]. Jag markerar några som är relevanta för Activetuts + läsare.


För Flash och AS3

Standardbiblioteket för kodning och avkodning av JSON-data i AS3 är as3corelib; se min guide för att använda externa bibliotek om du inte är säker på hur du installerar det.

Du kan avkoda en JSON-formaterad sträng till AS3-objekt och arrays genom att skicka den till com.adobe.serialization.json.JSON.decode (); Returvärdet kommer att vara antingen en array eller ett objekt beroende på JSON. Om du passerar falsk som ett andra argument kommer avkodaren inte att följa JSON-standarden så strikt, så att du kan komma undan med sloppierformatering.

Du kan koda ett AS3-objekt eller en array (som kan innehålla kapslade objekt och arrays) till en JSON-sträng genom att skicka den till com.adobe.serialization.json.JSON.encode (); returvärdet blir en sträng.

Det har blivit meddelat att framtida versioner av Flash kommer att innefatta inbyggd JSON-analysering, så det är snart inte nödvändigt att använda as3corelib för det syftet.


För. NET (Inklusive Silverlight)

För att analysera JSON, lägg bara till en referens till System.Json. Sedan:

 #using System.Json; avkodad = JsonValue.Parse (jsonString); // kan vara en JsonPrimitive, JsonArray eller JsonObject, beroende på att JSON passerade

Att koda ett objekt till en JSON-sträng är lite mer komplicerat. Du måste först skapa ett datakontrakt för vilken typ av objekt du vill koda. låt oss ringa vårt Sak, och själva objektet min sak. Sedan:

 #using System.Runtime.Serialization.Json; MemoryStream myStream = nytt MemoryStream (); DataContractJsonSerializer jsonEncoder = ny DataContractJsonSerializer (typof (Thing)); jsonEncoder.WriteObject (myStream, myThing); myStream.Position = 0; StreamReader sr = ny StreamReader (myStream); kodade = sr.ReadToEnd ();

Du kan också använda den här metoden för att avkoda en JSON-sträng till en specifik klass av objekt:

 #using System.Runtime.Serialization.Json; myStream.Position = 0; myOtherThing = ser.ReadObject (myStream); // du borde kasta detta som sak

Mer information finns på MSDN-sidorna Arbeta med JSON-data och hur: Serialisera och deserialisera JSON-data.


För JavaScript (och därmed HTML 5-appar)

Du skulle kunna bara skicka JSON-strängen till eval () i JavaScript, men det här är en hemsk säkerhetsrisk. De flesta moderna webbläsare stöder en funktion JSON.parse (), som kommer att tolka en JSON-sträng i JavaScript-objekt, och JSON.stringify (), som kommer att göra ett JavaScript-objekt eller en array till en JSON-sträng.

Douglas Crockford skapade ett bibliotek för att göra det i äldre webbläsare; den är tillgänglig på github.


För enhet

Det finns en C # -samling kallad LitJSON som du kan använda i dina Unity-projekt för att analysera och generera JSON. Du kan använda detta även om ditt projekt är skrivet i JavaScript eller Boo istället för C #.

För att avkoda ett Unity-objekt till en JSON-sträng:

 #using LitJson; sträng jsonString = JsonMapper.ToJson (myObject);

För att koda en JSON-sträng till ett Unity-objekt av typen Thing:

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

LitJSON Manual är stor; Jag rekommenderar att du läser det för mer vägledning.


För andra språk

JSON.org har en lång lista över bibliotek för olika plattformar och språk - plus du kan söka på Google, som nämnts ovan;)

Den här webbplatsen har också några bra visualiseringar av hur JSON kan byggas, och mycket detaljer går utöver vad jag har förklarat i denna snabba introduktion. Kolla in det om du vill veta mer!