Sådan arbejder du med JSON i JavaScript

introduktion

da JSON er afledt af JavaScript-programmeringssproget, er det et naturligt valg at bruge som dataformat i JavaScript. JSON, forkortelse for JavaScript Object Notation, udtales normalt som navnet ” Jason.”

for at lære mere om JSON generelt, læs vejledningen “En introduktion til JSON”.

for at begynde at tænke over, hvor du kan bruge JSON i dine JavaScript-programmer, inkluderer nogle generelle brugssager af JSON:

• lagring af data
• generering af datastrukturer fra brugerinput
• overførsel af data fra server til klient, klient til server og server til server
• konfiguration og verifikation af data

denne vejledning giver dig en introduktion til at arbejde med JSON i JavaScript. For at få mest muligt ud af denne introduktion skal du have en vis fortrolighed med JavaScript-programmeringssproget.

JSON-Format

JSONS format er afledt af JavaScript-objektsyntaks, men det er helt tekstbaseret. Det er en nøgle-værdi dataformat, der typisk gengives i krøllede seler.

når du arbejder med JSON, vil du sandsynligvis se JSON-objekter i en .json – fil, men de kan også eksistere som et JSON-objekt eller en streng inden for rammerne af et program. Læs mere om syntaks og struktur her.

Når du arbejder med en.json fil, vil det se sådan ud:

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

Hvis du i stedet har et JSON-objekt i en .js eller .html fil, vil du sandsynligvis se det indstillet til en variabel:

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

derudover kan du se JSON som en streng snarere end et objekt inden for rammerne af en JavaScript-programfil eller script. I dette tilfælde kan du også se det hele på en linje:

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

konvertering af JSON-objekter til strenge kan være særlig nyttig til transport af data på en hurtig måde.

Vi har gennemgået det generelle format for JSON, og hvordan du kan forvente at se det som en .json fil eller inden for JavaScript som et objekt eller en streng.

sammenligning med JavaScript-objekt

det er værd at huske på, at JSON blev udviklet til at blive brugt af ethvert programmeringssprog, mens JavaScript-objekter kun kan arbejdes med direkte via JavaScript-programmeringssproget.

Med hensyn til syntaks ligner JavaScript-objekter JSON, men tasterne i JavaScript-objekter er ikke strenge i anførselstegn. JavaScript-objekter er også mindre begrænsede med hensyn til typer, der overføres til værdier, så de kan bruge funktioner som værdier.

lad os se på et eksempel på et JavaScript-objekt fra hjemmesidebrugeren Sammy Shark, der i øjeblikket er online.

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

Dette vil se meget kendt ud for dig som et JSON-objekt, men der er ingen citater omkring nogen af tasterne (first_namelast_nameonline, eller full_name), og der er en funktionsværdi i den sidste linje.

hvis vi vil have adgang til dataene i JavaScript-objektet ovenfor, kunne vi bruge dot notation til at ringe user.first_name; og få en streng, men hvis vi vil have adgang til det fulde navn, skal vi gøre det ved at ringe user.full_name(); fordi det er en funktion.

JavaScript-objekter kan kun eksistere inden for JavaScript-sproget, så når du arbejder med data, der skal tilgås af forskellige sprog, er det bedst at vælge JSON.

adgang til JSON-Data

JSON-data fås normalt i Javascript via dot notation. For at forstå, hvordan dette fungerer, lad os overveje JSON-objektet sammy:

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

for at få adgang til nogen af værdierne bruger vi dot notation, der ser sådan ud:

sammy.first_namesammy.last_namesammy.online

variablen sammy efterfølges først af en prik efterfulgt af den nøgle, der skal åbnes.

for at oprette en JavaScript-alarm, der viser os den værdi, der er knyttet til nøglen first_name i en pop-up kan vi gøre det ved at kalde JavaScriptalert() funktion:

alert(sammy.first_name);

Output
Sammy

Her har vi med succes kaldt værdien forbundet medfirst_name – tasten frasammy JSON-objektet.

Vi kan også bruge syntaks for firkantet beslag til at få adgang til data fra JSON. For at gøre det ville vi holde nøglen i dobbelt citater inden for firkantede parenteser. For vores sammy variabel ovenfor, ved hjælp af firkantet beslag syntaks i en alert() funktion ser sådan ud:

alert(sammy);

Output
true

Når du arbejder med indlejrede array-elementer, skal du ringe til nummeret på elementet i dit array. Lad os overveje JSON nedenfor:

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

for at få adgang til strengen facebook, kan vi kalde det element i arrayet inden for rammerne af dot notation:

alert(user_profile.social_media.description);

Output
facebook

bemærk, at for hvert indlejret element bruger vi en ekstra prik.

brug af dot notation eller firkantet beslag syntaks giver os adgang til dataene indeholdt i JSON-format.

funktioner til at arbejde med JSON

dette afsnit vil se på to metoder til stringifying og parsing JSON. At kunne konvertere JSON fra objekt til streng og omvendt er nyttigt til overførsel og lagring af data.

JSON.stringify ()

funktionen JSON.stringify() Konverterer et objekt til en JSON-streng.

strenge er nyttige til transport af data fra en klient til en server gennem lagring eller videregivelse af oplysninger på en let måde. For eksempel kan du samle en brugers indstillinger på klientsiden og derefter sende dem til en server. Senere kan du derefter læse oplysningerne med JSON.parse() – metoden og arbejde med dataene efter behov.

Vi ser på et JSON-objekt, som vi tildeler variablenobj, og så konverterer vi det ved hjælp afJSON.stringify()ved at passereobj til funktionen. Vi kan tildele denne streng til variablen s:

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

nu, hvis vi arbejder med s, har vi JSON tilgængelig for os som en streng snarere end et objekt.

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

funktionenJSON.stringify() lader os konvertere objekter til strenge. For at gøre det modsatte ser vi på JSON.parse() – funktionen.

JSON.parse ()

strenge er nyttige til transport, men du vil gerne kunne konvertere dem tilbage til et JSON-objekt på klienten og / eller serversiden. Mens du kan konvertere tekst til et objekt med funktionen eval(), er det ikke særlig sikkert, så vi bruger funktionen JSON.parse() i stedet.

for at konvertere eksemplet i JSON.stringify() sektionen ovenfor, ville vi passere strengen s til funktionen og tildele den til en ny variabel:

var o = JSON.parse(s)

derefter ville vi have objektet o at arbejde med, hvilket ville være identisk med objektet obj.

for at tage et dybere kig, lad os overveje et eksempel på JSON.parse() inden for rammerne af 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

inden for rammerne af en HTML-fil kan vi se, hvordan JSON-strengens konverteres til et objekt, der kan hentes på den endelige gengivelse af siden ved at få adgang til JSON via dot notation.

JSON.parse() er en sikker funktion til at analysere JSON-strenge og konvertere dem til objekter.

konklusion

JSON er et naturligt format til brug i JavaScript og har mange implementeringer til rådighed til brug i mange populære programmeringssprog. Hvis du vil bruge formatet på et andet progamming-sprog, kan du se fuld sprogunderstøttelse på siden “introduktion af JSON”.

fordi det er let og let overføres mellem programmeringssprog og systemer, JSON har oplevet øget støtte i API ‘ er, herunder kvidre API.