Hur man arbetar med JSON i JavaScript

introduktion

eftersom JSON härrör från JavaScript-programmeringsspråket är det ett naturligt val att använda som dataformat i JavaScript. JSON, förkortning för JavaScript Object Notation, uttalas vanligtvis som namnet ” Jason.”

för att lära dig mer om JSON i allmänna termer, läs handledningen ”en introduktion till JSON”.

för att börja tänka på var du kan använda JSON i dina JavaScript-program, inkluderar vissa allmänna användningsfall av JSON:

• lagra data
• generera datastrukturer från användarinmatning
• överföra data från server till klient, klient till server och server till server
• konfigurera och verifiera data

denna handledning ger dig en introduktion till att arbeta med JSON i JavaScript. För att få ut det mesta av denna introduktion bör du ha viss kännedom om JavaScript-programmeringsspråket.

JSON-Format

JSONS format härrör från JavaScript-objektsyntax, men det är helt textbaserat. Det är ett dataformat med nyckelvärde som vanligtvis återges i lockiga hängslen.

När du arbetar med JSON ser du sannolikt JSON-objekt i en.json – fil, men de kan också existera som ett JSON-objekt eller en sträng inom ramen för ett program. Läs mer om syntaxen och strukturen här.

När du arbetar med en .json – fil ser den ut så här:

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

om du istället har ett JSON-objekt i en .js eller .html fil, kommer du sannolikt att se den inställd på en variabel:

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

dessutom kan du se JSON som en sträng snarare än ett objekt inom ramen för en JavaScript-programfil eller ett skript. I det här fallet kan du också se allt på en rad:

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

att konvertera JSON-objekt till strängar kan vara särskilt användbart för att transportera data snabbt.

Vi har gått över det allmänna formatet för JSON och hur du kan förvänta dig att se det som en .json fil, eller inom JavaScript som ett objekt eller en sträng.

jämförelse med JavaScript-objekt

det är värt att komma ihåg att JSON utvecklades för att användas av alla programmeringsspråk, medan JavaScript-objekt bara kan bearbetas direkt via JavaScript-programmeringsspråket.

När det gäller syntax liknar JavaScript-objekt JSON, men nycklarna i JavaScript-objekt är inte strängar i citat. JavaScript-objekt är också mindre begränsade när det gäller typer som skickas till värden, så de kan använda funktioner som värden.

Låt oss titta på ett exempel på ett JavaScript-objekt för webbplatsanvändaren Sammy Shark som för närvarande är online.

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

detta kommer att se mycket bekant för dig som ett JSON-objekt, men det finns inga citat runt någon av nycklarna (first_namelast_nameonline, eller full_name), och det finns ett funktionsvärde i den sista raden.

Om vi vill komma åt data i JavaScript-objektet ovan kan vi använda punktnotation för att ringa user.first_name; och få en sträng, men om vi vill komma åt det fullständiga namnet måste vi göra det genom att ringa user.full_name(); eftersom det är en funktion.

JavaScript-objekt kan bara existera inom JavaScript-språket, så när du arbetar med data som behöver nås av olika språk är det bäst att välja JSON.

åtkomst till JSON-Data

JSON-data nås normalt i Javascript via punktnotation. För att förstå hur detta fungerar, låt oss överväga JSON-objektet sammy:

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

för att komma åt något av värdena använder vi punktnotation som ser ut så här:

sammy.first_namesammy.last_namesammy.online

variabeln sammy är först, följt av en punkt, följt av nyckeln som ska nås.

för att skapa en JavaScript-varning som visar oss värdet associerat med nyckeln first_name I en popup kan vi göra det genom att ringa JavaScript alert()-funktionen:

alert(sammy.first_name);

Output
Sammy

Här har vi framgångsrikt kallat värdet associerat med first_name nyckel från sammy JSON-objektet.

Vi kan också använda square bracket syntax för att komma åt data från JSON. För att göra det skulle vi hålla nyckeln i dubbla citat inom kvadratkonsoler. För vårsammy variabel ovan, med hjälp av square bracket syntax i en alert() funktion ser ut så här:

alert(sammy);

Output
true

När du arbetar med kapslade arrayelement ska du ringa numret på objektet i din array. Låt oss överväga JSON nedan:

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

för att komma åt strängen facebook, kan vi kalla det objektet i matrisen inom ramen för punktnotation:

alert(user_profile.social_media.description);

Output
facebook

Lägg märke till att för varje kapslat element använder vi en extra punkt.

med hjälp av punktnotation eller kvadratkonsolsyntax kan vi komma åt data som finns i JSON-format.

funktioner för att arbeta med JSON

det här avsnittet kommer att titta på två metoder för strängning och tolkning av JSON. Att kunna konvertera JSON från objekt till sträng och vice versa är användbart för överföring och lagring av data.

JSON.stringify ()

funktionen JSON.stringify() konverterar ett objekt till en JSON-sträng.

strängar är användbara för att transportera data från en klient till en server genom att lagra eller överföra information på ett lätt sätt. Du kan till exempel samla en användares inställningar på klientsidan och sedan skicka dem till en server. Senare kan du sedan läsa informationen med JSON.parse() – metoden och arbeta med data efter behov.

vi tittar på ett JSON-objekt som vi tilldelar variabeln obj, och sedan konverterar vi det med JSON.stringify() genom att skicka obj till funktionen. Vi kan tilldela denna sträng till variabeln s:

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

Nu, om vi arbetar med s, har vi JSON tillgänglig för oss som en sträng snarare än ett objekt.

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

funktionenJSON.stringify() låter oss Konvertera objekt till strängar. För att göra det motsatta tittar vi på funktionen JSON.parse().

JSON.parse ()

strängar är användbara för transport men du vill kunna konvertera dem tillbaka till ett JSON-objekt på klienten och / eller serversidan. Medan du kan konvertera text till ett objekt med funktionen eval() är den inte särskilt säker, så vi använder funktionen JSON.parse() istället.

för att konvertera exemplet i JSON.stringify() avsnittet ovan skulle vi skicka strängen s till funktionen och tilldela den till en ny variabel:

var o = JSON.parse(s)

då skulle vi ha objektet o att arbeta med, vilket skulle vara identiskt med objektet obj.

för att ta en djupare titt, låt oss överväga ett exempel på JSON.parse() inom ramen för 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

inom ramen för en HTML-fil kan vi se hur JSON-strängen s konverteras till ett objekt som kan hämtas på den slutliga återgivningen av sidan genom att komma åt JSON via punktnotation.

JSON.parse() är en säker funktion för att tolka JSON-strängar och konvertera dem till objekt.

slutsats

JSON är ett naturligt format att använda i JavaScript och har många implementeringar tillgängliga för användning i många populära programmeringsspråk. Om du vill använda formatet på ett annat progamming-språk kan du se fullständigt språkstöd på webbplatsen ”Introducing JSON”.

eftersom den är lätt och lätt överförs mellan programmeringsspråk och system har JSON upplevt ökat stöd i API: er, inklusive Twitter API.