mars 11, 2021

Hvordan Arbeide MED JSON I JavaScript

Innledning

FORDI JSON er avledet Fra JavaScript programmeringsspråk, er DET et naturlig valg å bruke som et dataformat I JavaScript. JSON, kort For JavaScript Object Notation, er vanligvis uttalt som navnet » Jason.»

for å lære mer om JSON generelt, les» En Introduksjon TIL JSON » opplæringen.

for å begynne å tenke på hvor DU kan bruke JSON I JavaScript-programmer, noen generelle bruk tilfeller AV JSON inkluderer:

Lagring av data
Generere datastrukturer fra brukerinngang
Overføre data fra server til klient, klient til server og server til server
Konfigurere og verifisere data

denne opplæringen vil gi deg en introduksjon til å jobbe MED JSON I JavaScript. For å få mest mulig ut av denne introduksjonen, bør du ha litt kjennskap Til JavaScript-programmeringsspråket.

Json Format

jsons format er avledet Fra JavaScript objekt syntaks, men det er helt tekstbasert. Det er en nøkkelverdi dataformat som vanligvis gjengis i klammeparenteser.

når DU arbeider MED JSON, vil DU sannsynligvis se json-objekter i en.json – fil, men de kan også eksistere som ET json-objekt eller en streng i sammenheng med et program. Les mer om syntaks og struktur her.

når du arbeider med en.json fil, vil den se slik ut:

sammy.json

{ "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

hvis du i stedet har ET json-objekt i en .js eller .html fil, vil du sannsynligvis se den satt til en variabel:

var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

i tillegg kan du se json som en streng i stedet for et objekt i sammenheng med en javascript-programfil eller et skript. I dette tilfellet kan du også se alt på en linje:

var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

Konvertering AV JSON-objekter til strenger kan være spesielt nyttig for å transportere data på en rask måte.

Vi har gått over det generelle formatet TIL JSON og hvordan DU kan forvente å se det som en .json fil, eller I JavaScript som et objekt eller en streng.

Sammenligning Med JavaScript Object

DET er verdt å huske på AT JSON ble utviklet for å brukes av et hvilket som helst programmeringsspråk, Mens JavaScript-objekter kun kan bearbeides direkte gjennom JavaScript-programmeringsspråket.

Når Det gjelder syntaks, Er JavaScript-objekter lik JSON, men tastene I JavaScript-objekter er ikke strenger i anførselstegn. JavaScript-objekter er også mindre begrenset når det gjelder typer som overføres til verdier, slik at de kan bruke funksjoner som verdier.

La oss se på et Eksempel På Et JavaScript-objekt av nettstedbrukeren Sammy Shark som er online for øyeblikket.

var user = { first_name: "Sammy", last_name : "Shark", online : true, full_name : function() { return this.first_name + " " + this.last_name; }};

Dette vil se veldig kjent ut som ET json-objekt, men det er ingen anførselstegn rundt noen av tastene (first_namelast_nameonline, eller full_name), og det er en funksjonsverdi i den siste linjen.

Hvis vi vil ha tilgang til dataene i JavaScript-objektet ovenfor, kan vi bruke dot notation til å ringe user.first_name; og få en streng, men hvis vi vil ha tilgang til hele navnet, må vi gjøre det ved å ringe user.full_name(); fordi det er en funksjon.

JavaScript-objekter kan bare eksistere innenfor JavaScript-språket, så når du arbeider med data som må nås av forskjellige språk, er DET best Å velge JSON.

Tilgang TIL JSON-Data

JSON-data er normalt tilgjengelig I Javascript via punktnotasjon. For å forstå hvordan dette fungerer, la OSS vurdere json-objektet sammy:

var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

for å få tilgang til noen av verdiene bruker vi punktnotasjon som ser slik ut:

sammy.first_namesammy.last_namesammy.online

variabelen sammy er først, etterfulgt av en prikk, etterfulgt av nøkkelen som skal nås.

for å opprette Et JavaScript-varsel som viser oss verdien som er knyttet til nøkkelen first_name i en popup, kan vi gjøre Det ved å ringe JavaScript alert() – funksjonen:

alert(sammy.first_name);

Output
Sammy

her har vi vellykket kalt verdien knyttet tilfirst_name – tasten frasammy json-objektet.

Vi kan også bruke firkantbrakett syntaks for å få tilgang til data FRA JSON. For å gjøre det, ville vi holde nøkkelen i doble anførselstegn i firkantede parenteser. For vår sammy variabel over, bruker firkantbrakett syntaks i en alert() funksjonen ser slik ut:

alert(sammy);

Output
true

når du arbeider med nestede matriseelementer, bør du ringe nummeret til elementet i matrisen din. La OSS vurdere JSON nedenfor:

var user_profile = { "username" : "SammyShark", "social_media" : }

for å få tilgang til strengen facebook, kan vi kalle det elementet i matrisen i sammenheng med punktnotasjon:

alert(user_profile.social_media.description);

Output
facebook

legg merke til at for hvert nestet element bruker vi en ekstra prikk.

ved hjelp av punktnotasjon eller firkantbrakettsyntaks kan vi få tilgang til dataene i json-format.

Funksjoner For Å Jobbe MED JSON

Denne delen vil se på to metoder for stringifying OG parsing JSON. Å kunne konvertere JSON fra objekt til streng og omvendt er nyttig for overføring og lagring av data.

JSON.stringify ()

funksjonenJSON.stringify() konverterer et objekt til EN json-streng.

Strenger er nyttige for å transportere data fra en klient til en server ved å lagre eller sende informasjon på en lett måte. Du kan for eksempel samle en brukers innstillinger på klientsiden og deretter sende dem til en server. Senere kan du deretter lese informasjonen med JSON.parse() – metoden og arbeide med dataene etter behov.

Vi ser PÅ ET json-objekt som vi tilordner variabelen obj, og så konverterer vi det ved å brukeJSON.stringify() ved å sendeobj til funksjonen. Vi kan tilordne denne strengen til variabelen s:

var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}var s = JSON.stringify(obj)

nå, hvis vi jobber meds, vil VI ha JSON tilgjengelig for OSS som en streng i stedet for et objekt.

'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'

JSON.stringify() – funksjonen lar oss konvertere objekter til strenger. For å gjøre det motsatte, ser vi påJSON.parse() – funksjonen.

JSON.parse ()

Strenger er nyttige for transport, men du vil kunne konvertere dem tilbake til ET json-objekt på klienten og / eller serversiden. Mens du kan konvertere tekst til et objekt medeval() – funksjonen, er den ikke veldig sikker, så vi brukerJSON.parse() – funksjonen i stedet.

for å konvertere eksemplet I JSON.stringify() ovenfor, ville vi passere strengen s til funksjonen, og tilordne den til en ny variabel:

var o = JSON.parse(s)

da ville vi ha objektet o å jobbe med, noe som ville være identisk med objektet obj.

for å ta en dypere titt, la oss vurdere et eksempel på JSON.parse() i sammenheng MED EN HTML-fil:

<!DOCTYPE html><html><body><p></p><script>var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';var obj = JSON.parse(s);document.getElementById("user").innerHTML ="Name: " + obj.first_name + " " + obj.last_name + "<br>" +"Location: " + obj.location;</script></body></html>

Output
Name: Sammy SharkLocation: Ocean

i sammenheng med EN HTML-fil kan VI se HVORDAN json-strengen s konverteres til et objekt som kan hentes på den endelige gjengivelsen av siden ved å få TILGANG TIL JSON via punktnotasjon.

JSON.parse() er en sikker funksjon for å analysere json-strenger og konvertere dem til objekter.

Konklusjon

JSON er et naturlig format å bruke I JavaScript og har mange implementeringer tilgjengelig for bruk i mange populære programmeringsspråk. Hvis du vil bruke formatet i et annet progammingspråk, kan du se full språkstøtte på» Introducing JSON » – siden.Fordi DEN er lett og lett overføres mellom programmeringsspråk og systemer, HAR JSON opplevd økt støtte I Api-Er, inkludert Twitter API.