Forstå JSON

Understanding JSON
5
Del
5
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

JSON (Javascript Object Notation, som jeg uttaler "Jason", og du kan uttale slik du vil) er et tekstbasert dataformat som er designet for å være lesbar, lett, og lett å overføre mellom en server og en web-klient. Syntaksen er avledet fra Javascript - derav navnet -., Men det kan brukes på de fleste språk, inkludert AS3 og C #




Arrays

Hvis du har gjort mye programmering, vil du ha kommet over arrays før: samlinger av gjenstander, hver tildelt en bestemt heltall

I JSON, en rekke av de seks første bokstavene i alfabetet ville være representert lignende. dette: product: ["a", "b", "c", "d", "e", "f"]

AS3 og Javascript programmerere vil finne den ovenfor notering veldig kjent. Det er lik C # måte å definere en matrise, også.

Som du kan sikkert gjette, de klammer si "dette er en matrise", og komma blir brukt for å skille ulike elementer (merk at det er ingen komma etter den siste element). Forutsatt at språket du analysere JSON bruker null-baserte arrays (og hvor mange språk ikke
, i disse dager?), Element 0 vil være "en", en vil være "b", 2 vil være "c", og så videre

For å gjøre arrays lettere å lese, vil vi ofte skrive dem med ekstra linjeskift og innrykk. product: ["a", "b", "c" "d", "e", "f"]

Legg merke til at det er fortsatt ingen komma etter den siste element, slik det nå ser litt rart.

Vi trenger ikke å bruke strenger som elementene i en JSON utvalg; Vi kan også bruke tall, sann, usann og null. Det er ingen streng skrive, noe som betyr at du kan blande typer verdier du bruker i en gitt matrise. For eksempel, er dette helt gyldig: product: ["eple", 3, 912, null, -7,2222202, "#", true, false]

Merk at du må bruke anførselstegn (") å omgi alle strenger, med apostrof (') er ikke tillatt Ja, dette er tilfelle, selv om Javascript kan du legge strenger i begge typer quote Hvis du ønsker å bruke anførselstegn inni JSON-strenger, bruke \\ "i stedet



Objekter

En matrise er en samling av elementer hvor hver er tilordnet til en bestemt heltall. Et objekt er en samling av elementer hvor hver er tilordnet til en bestemt string
. Elementene er kalt verdier
, og strengene som brukes til å identifisere dem, kalles nøkler
. Noen programmeringsspråk kaller denne typen datastruktur en hash table
eller hash kart

Vi kunne representere folks aldre i et objekt som så:.
{" Alan ": 44," John ": 58," Brian ": 19," Eliza ": 4," Jessie ": 58}

klammeparentes si" dette er et objekt ", og - som med arrays - komma skille ulike elementer. Imidlertid er elementene angitt i parene
, denne gang. Det er lettere å se om vi legger noen linjeskift og innrykk: product: {"Alan": 44, "John": 58, "Brian": 19, "Eliza": 4, "Jessie": 58}

I hvert par, skiller en kolon nøkkelen (som er en streng) fra verdien (som i dette tilfelle er et tall). Når vi gjør en matrise, vi trenger ikke å spesifisere hvilke heltall hvert element ble tildelt (dvs. vi bare trengte å spesifisere verdiene og ikke tastene), fordi de ble tildelt basert på rekkefølgen de ble skrevet i matrisen.

I stedet for å be andre eller femte element, som når du får tilgang til en rekke, med et objekt du vil be om "Alan" th eller "Eliza" th element.

For å gjøre ting mer forvirrende, gjenstander også tillate deg å bruke strenger som verdiene - ikke bare nøklene. Så du kan ha en gjenstand som dette: product: {"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/"}

This måte, for å hente URL for et gitt Tuts + området, du kan be om det å bruke navnet på området som en nøkkel. Imidlertid er det motsatte ikke er sant -. Du kan ikke bruke "http://cg.tutsplus.com/" for å hente "Cgtuts +"

De samme reglene om ulike typer sitater gjelde for gjenstander som til matriser. Objekter kan også bruke strenger, tall, sanne, falske, og null som verdier (men bare strenger som nøkler).



Nesting

Objekter og arrays kan også lagre andre objekter og arrays . Dette lar oss lage nestede datastrukturer; for eksempel: product: {"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}}

La oss se at med litt mer mellomrom: product: {"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/~~number=plural", "hasPremium": false}, "Mobiletuts +": {"url": "http://mobile.tutsplus.com/", "hasPremium": false}}

Hvert objekt inneholder to felt: den ene med nøkkelen "url" hvis verdien er en streng som inneholder nettadressen til nettstedet, og ett med nøkkelen hasPremium hvis verdien er en boolsk det er sant om nettstedet har en Premium seksjonen.

Vi er ikke begrenset til å ha nøyaktig samme struktur for hvert objekt i JSON, skjønt. For eksempel kan vi legge til en ekstra URL som peker til URL Premium-programmet, men bare for de områdene som har en: product: {"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: //nettet. 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-program/ae-Premium/"}," Vectortuts + ": {" url ":" http: //vector.tutsplus.com/"," hasPremium ": true," premiumUrl ":" http://tutsplus.com/Premium-program/vector-Premium/"}," Audiotuts + ": {" url ":" http://audio.tutsplus.com/"," hasPremium ": true," premiumUrl ":" http://tutsplus.com/Premium-program/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/~~number=plural", "hasPremium": false}, "Mobiletuts +": {"url": "http://mobile.tutsplus.com/", "hasPremium" : falsk}}

Vi kan også inkludere en rekke alle de nyeste Premium tutorials for et gitt sted (jeg vil bare vise Activetuts + her, og begrense det til noen premie, for å spare plass): product: {" 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/"]} /** klipp! ** /"Mobiletuts +": {"url": "http://mobile.tutsplus.com/", "hasPremium": false}}

En rekke er fornuftig for notering premiene, fordi jeg jobber i henhold antagelsen om at noen app som faktisk leser disse dataene er bare kommer til å vise en liste over Premium tutorials, snarere enn å måtte åpne dem i henhold til deres navn -., slik at vi ikke trenger å tildele dem hver en streng nøkkel

Vi kan ta dette enda lenger: product: {"Activetuts +": {"url": "http://active.tutsplus.com/", "premium": {"hasPremium": true, "premiumUrl" : "http://tutsplus.com/Premium-program/active-Premium/", "previousPremiums": [{"title": "Lag en passelig Flash Quiz Application", "url": "http: //tutsplus. com /join /",}, {" title ":" Lag en plass shooter spill i Flash Bruke AS3 "," url ": "http://active.tutsplus.com/tutorials/games/create-a-space-shooter-game-in-flash-using-as3http://tutsplus.com/join/", }, {"Title": "skjule og avslørende Scener med AS3", "url": "http://active.tutsplus.com/tutorials/games/obscuring-and-revealing-scenes-with-as3http://tutsplus.com/join/", }, {"Title": "Å bygge en dynamisk Shadow Casting Engine i AS3", "url": "http://active.tutsplus.com/tutorials/games/building-a-dynamic-shadow-casting-engine-in-as3http://tutsplus.com/join/", }, {"Title": "Animere Envato Fellesskapet Podcast", "url": "http://tutsplus.com/join/"}]} /** klipp! ** /"Mobiletuts +": {"url": "http://mobile.tutsplus.com/", "premium": {"hasPremium": false}}}

Phew! Hvis vi ønsket vi kunne lage objekter som inneholder navn og profilnettadressene til hver forfatter av hver Premium tutorial - kan du finne ut den beste måten å gjøre det

Holde arrays innen arrays kan være nyttig, også;? spesielt for gaming. Dette kan være den nåværende utformingen av en Tic-Tac-Toe bord: product: [[1, 2, 0], [0, 1, 0] [0, 2, 1]]

Ikke se det? Prøv å fjerne litt tomrom: product: [[1,2,0], [0,1,0], [0,2,1]]

1 er et null, er to kors og 0 er tom rom. Noughts vinne! Og jeg er sikker på at du kan se hvordan noe lignende kunne brukes til Battle eller Connect 4 eller Minesveiper. For mer informasjon om nestede matriser, sjekk ut min forrige tutorial.



Bruke JSON med ulike plattformer

Siden JSON er så populært, det er parsere
(verktøy og bibliotekene som dekode ett programmeringsspråk, slik at en annen kan forstå det) og generatorer
(verktøy og biblioteker som gjør det motsatte; kode ett programmeringsspråk inn i en annen) er tilgjengelig for de fleste programmeringsspråk. Bare søk [JSON-parser (navnet på ditt språk}]
. Jeg vil fremheve noen som er relevante for Activetuts + lesere.



For Flash og AS3

Den standard bibliotek for koding og dekoding JSON data i AS3 er as3corelib, se min guide til å bruke eksterne biblioteker hvis du ikke er sikker på hvordan du installerer den

Du kan dekode en JSON-formatert String til AS3. objekter og arrays ved å sende den til com.adobe.serialization.json.JSON.decode (); returverdien vil være enten en matrise eller et objekt, avhengig av JSON Hvis du passerer falsk som andre argument, dekoderen won. 't følge JSON standard så strengt, slik at du kan komme unna med sloppier formatering.

Du kan kode en AS3 objekt eller array (som kan inneholde nestet gjenstander og arrays) til en JSON streng ved å sende den til com .adobe.serialization.json.JSON.encode (); returverdien vil være en String

Det er blitt annonsert at fremtidige versjoner av Flash vil inneholde innfødt JSON parsing, så det vil snart være behov for. bruke as3corelib for det formålet.



For .NET (Inkludert Silverlight)

For å analysere JSON, bare legge en referanse til System.Json. Deretter:
#using System.Json; dekodet = JsonValue.Parse (jsonString); //kan være en JsonPrimitive, JsonArray, eller JsonObject, avhengig av JSON passert

For å kode et objekt til en JSON streng er litt mer komplisert. Du må først opprette en datakontrakt for den type objekt du ønsker å kode; la oss kalle vår Thing, og selve objektet myThing. Deretter:
#using System.Runtime.Serialization.Json; Memory myStream = new Memory (); DataContractJsonSerializer jsonEncoder = new DataContractJsonSerializer (typeof (Thing)); jsonEncoder.WriteObject (myStream, myThing); myStream.Position = 0; StreamReader sr = new StreamReader (myStream); kodet = sr.ReadToEnd ();

Du kan også bruke denne metoden for å dekode en JSON streng til en bestemt klasse av objekt:
#using System.Runtime.Serialization.Json; myStream.Position = 0; myOtherThing = ser.ReadObject (myStream); //du bør kaste dette som Thing

For mer informasjon, se MSDN sider Arbeide med JSON data og Hvordan. serialize og Deserialize JSON data



For Javascript (og dermed HTML 5 apps )

Du kan
bare passere JSON streng til eval () i Javascript, men dette er en forferdelig sikkerhetsrisiko. De fleste moderne nettlesere støtter en funksjon JSON.parse (), som vil analysere en JSON streng i Javascript objekter, og JSON.stringify (), som vil slå en Javascript-objekt eller matrise til en JSON streng.

Douglas Crockford opprettet et bibliotek for å gjøre dette i eldre nettlesere; det er tilgjengelig på github.



For Unity

Det er en C # forsamlingen kalles LitJSON som du kan bruke i Unity prosjekter for å analysere og generere JSON. Du kan bruke dette selv om prosjektet er skrevet i Javascript eller Boo snarere enn C #

For å dekode en Unity objekt til en JSON streng.
#using LitJson; string jsonString = JsonMapper.ToJson (myObject);

For å kode en JSON streng til en Unity objekt av typen Thing:
#using LitJson; Thing myThing = JsonMapper.ToObject < Thing > (jsonString);

LitJSON Manual er stor; Jeg anbefaler å lese at for mer veiledning



For andre språk

JSON.org har en lang liste med biblioteker for ulike plattformer og språk -. Pluss, kan du søke på Google, som nevnt ovenfor;)

Dette området har også noen gode visualiseringer av hvordan JSON kan bygges, og massevis av detaljer som går utover det jeg har forklart i denne rask innføring. Sjekk det ut hvis du vil vite mer! Anmeldelser