How to Work with JSON in JavaScript

Inleiding

omdat JSON is afgeleid van de programmeertaal JavaScript, is het een natuurlijke keuze om te gebruiken als een dataformaat in JavaScript. JSON, kort voor JavaScript Object Notation, wordt meestal uitgesproken als de naam “Jason.”

voor meer informatie over JSON in algemene termen, lees de “An Introduction to JSON” tutorial.

om na te denken over waar u JSON kunt gebruiken in uw JavaScript-programma ‘ s, omvatten enkele algemene gebruikssituaties van JSON::

• gegevens opslaan
• gegevensstructuren genereren uit gebruikersinvoer
• gegevens overbrengen van server naar client, client naar server en server naar server
• gegevens configureren en verifiëren

Deze tutorial geeft u een inleiding tot het werken met JSON in JavaScript. Om optimaal gebruik te maken van deze introductie, moet je wat vertrouwd zijn met de programmeertaal JavaScript.

JSON formaat

JSON ‘ s formaat is afgeleid van JavaScript object syntaxis, maar het is volledig tekst-gebaseerd. Het is een sleutelwaarde dataformaat dat meestal wordt weergegeven in accolades.

wanneer u met JSON werkt, zult u waarschijnlijk JSON-objecten zien in een .json bestand, maar ze kunnen ook bestaan als een JSON-object of string binnen de context van een programma. Lees hier meer over de syntaxis en structuur.

wanneer u met een .json bestand werkt, ziet het er als volgt uit:

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

Als u in plaats daarvan een JSON-object hebt in een .js of .html bestand, zult u waarschijnlijk een variabele zien:

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

bovendien kunt u JSON zien als een tekenreeks in plaats van een object in de context van een JavaScript-programmabestand of-script. In dit geval kunt u het ook allemaal op één regel zien:

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

het omzetten van JSON-objecten in strings kan bijzonder nuttig zijn voor het transporteren van gegevens op een snelle manier.

we hebben het algemene formaat van JSON besproken en hoe je het kunt verwachten als een .json bestand, of in JavaScript als een object of een string.

vergelijking met JavaScript-Object

Het is de moeite waard om in gedachten te houden dat JSON is ontwikkeld om door elke programmeertaal te worden gebruikt, terwijl JavaScript-objecten alleen rechtstreeks via de programmeertaal JavaScript kunnen worden gebruikt.

in termen van syntaxis zijn JavaScript-objecten vergelijkbaar met JSON, maar de toetsen in JavaScript-objecten zijn geen tekenreeksen tussen aanhalingstekens. Ook JavaScript-objecten zijn minder beperkt in termen van typen doorgegeven aan waarden, zodat ze functies kunnen gebruiken als waarden.

laten we eens kijken naar een voorbeeld van een JavaScript-object van de websitegebruiker Sammy Shark die momenteel online is.

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

Dit komt u bekend voor als een JSON-object, maar er zijn geen aanhalingstekens rond de toetsen (first_namelast_nameonline, of full_name), en er is een functiewaarde in de laatste regel.

als we toegang willen krijgen tot de gegevens in het JavaScript-object hierboven, kunnen we puntnotatie gebruiken om user.first_name; aan te roepen en een tekenreeks te krijgen, maar als we toegang willen krijgen tot de volledige naam, dan moeten we dit doen door user.full_name(); aan te roepen omdat het een functie is.

JavaScript-objecten kunnen alleen in de JavaScript-taal bestaan, dus als u met gegevens werkt die door verschillende talen moeten worden benaderd, kunt u het beste kiezen voor JSON.

toegang tot JSON-gegevens

JSON-gegevens wordt normaal benaderd in Javascript door middel van puntnotatie. Om te begrijpen hoe dit werkt, laten we eens kijken naar het JSON object sammy:

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

om toegang te krijgen tot een van de waarden, zullen we dot notatie gebruiken die er als volgt uitziet:

sammy.first_namesammy.last_namesammy.online

de variabele sammy wordt eerst gevolgd door een punt, gevolgd door de te openen sleutel.

om een JavaScript alert aan te maken dat ons de waarde toont die geassocieerd is met de sleutel first_name in een pop-up, kunnen we dit doen door de JavaScript alert() functie aan te roepen:

alert(sammy.first_name);

Output
Sammy

Hier hebben we met succes de waarde genoemd die geassocieerd is met de first_name sleutel van het sammy JSON object.

We kunnen ook gebruik maken van vierkante haakjes syntaxis om toegang te krijgen tot gegevens van JSON. Om dat te doen, zouden we de sleutel tussen dubbele aanhalingstekens tussen vierkante haakjes houden. Voor onze sammy variabele hierboven, ziet het gebruik van vierkante haakjes syntaxis in een alert() functie er als volgt uit:

alert(sammy);

Output
true

wanneer u met geneste array-elementen werkt, moet u het nummer van het item in uw array aanroepen. Laten we de JSON hieronder bekijken:

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

om toegang te krijgen tot de string facebook, kunnen we dat item in de array aanroepen binnen de context van dot notatie:

alert(user_profile.social_media.description);

Output
facebook

merk op dat Voor elk geneste element gebruiken we een extra punt.

met behulp van dot notation of square bracket syntaxis kunnen we toegang krijgen tot de gegevens in JSON-formaat.

functies voor het werken met JSON

Deze sectie zal kijken naar twee methoden voor het stringifying en ontleden van JSON. In staat zijn om JSON te converteren van object naar string en vice versa is handig voor het overbrengen en opslaan van gegevens.

JSON.stringify ()

de functie JSON.stringify() Converteert een object naar een JSON-tekenreeks.

Strings zijn handig voor het transporteren van gegevens van een client naar een server door het opslaan of doorgeven van informatie op een lichtgewicht manier. U kunt bijvoorbeeld de instellingen van een gebruiker aan de clientzijde verzamelen en deze vervolgens naar een server sturen. Later kunt u de informatie lezen met de JSON.parse() methode en met de gegevens werken indien nodig.

We zullen een JSON-object bekijken dat we toewijzen aan de variabele obj, en dan zullen we het converteren met JSON.stringify() door obj aan de functie te geven. We kunnen deze tekenreeks toewijzen aan de variabele s:

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

als we nu met s werken, hebben we de JSON beschikbaar als een tekenreeks in plaats van een object.

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

met de functie JSON.stringify() kunnen we objecten naar tekenreeksen converteren. Om het tegenovergestelde te doen, zullen we kijken naar de JSON.parse() functie.

JSON.parse ()

Strings zijn nuttig voor het transporteren, maar je wilt ze terug kunnen converteren naar een JSON object op de client en/of de server kant. Hoewel u tekst naar een object kunt converteren met de functie eval(), is deze niet erg veilig, dus gebruiken we in plaats daarvan de functie JSON.parse().

om het voorbeeld in de JSON te converteren.stringify() sectie hierboven, zouden we de string s aan de functie doorgeven, en het toewijzen aan een nieuwe variabele:

var o = JSON.parse(s)

dan zouden we het object o hebben om mee te werken, wat identiek zou zijn aan het object obj.

laten we een voorbeeld van JSON.parse() bekijken in de context van een HTML-bestand:

<!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

in de context van een HTML-bestand kunnen we zien hoe de JSON-tekenreeks s wordt geconverteerd naar een object dat kan worden opgehaald op de uiteindelijke rendering van de pagina door toegang te krijgen tot de JSON via puntnotatie.

JSON.parse() is een veilige functie om JSON-strings te ontleden en te converteren naar objecten.

conclusie

JSON is een natuurlijk formaat om te gebruiken in JavaScript en heeft veel implementaties beschikbaar voor gebruik in veel populaire programmeertalen. Als u het formaat in een andere programmeertaal wilt gebruiken, kunt u de volledige taalondersteuning zien op de site “Introducing JSON”.

omdat het lichtgewicht is en gemakkelijk wordt overgedragen tussen programmeertalen en systemen, heeft JSON meer ondersteuning in API ‘ s, waaronder de Twitter API.