JS-zelfstudie

JS HOME JS Introductie JS Waarheen? JS-uitgang JS-verklaringen JS-syntaxis JS-opmerkingen JS-variabelen JS Let JS Const JS-operators JS Rekenen JS-opdracht JS-gegevenstypen JS-functies JS-objecten JS-evenementen JS-snaren JS String-methoden JS String zoeken JS String-sjablonen JS-nummers JS-nummermethoden JS-arrays JS-array-methoden JS-array sorteren JS-array-iteratie JS Array Const JS-datums JS-datumnotaties JS Datum Ophaalmethoden Methoden voor het instellen van JS-datum JS Math JS Willekeurig JS Booleans JS-vergelijkingen JS-voorwaarden JS-schakelaar JS Loop For JS-lus voor binnen JS Loop For Of JS-lus terwijl JS Break JS-iteraties JS-sets JS-kaarten JS Typeof JS Type conversie JS Bitwise JS RegExp JS-fouten JS-bereik JS Hijsen JS strikte modus JS dit trefwoord JS-pijlfunctie JS-lessen JS JSON JS-foutopsporing JS-stijlgids JS-best practices JS-fouten JS-prestaties JS Gereserveerde Woorden

JS-versies

JS-versies JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-geschiedenis

JS-objecten

Objectdefinities Objecteigenschappen Objectmethoden Objectweergave Objectaccessoires Objectconstructeurs Objectprototypes Object-Iterables Objectsets Objectkaarten Objectreferentie

JS-functies

Functiedefinities Functieparameters: Functie-aanroep Functie-oproep: Functie Toepassen Functie Sluitingen

JS-lessen

Klas Intro Klasse Overerving Klasse Statisch

JS Asynchrone

JS-callbacks JS asynchroon JS belooft JS Async/Wachten

JS HTML DOM

DOM Intro DOM-methoden DOM-document DOM-elementen DOM HTML DOM-formulieren DOM-CSS DOM-animaties DOM-evenementen DOM-gebeurtenisluisteraar DOM-navigatie DOM-knooppunten DOM-collecties DOM-knooppuntlijsten

JS-browserstuklijst

JS-venster JS-scherm JS-locatie JS-geschiedenis JS-navigator JS pop-upwaarschuwing JS-timing JS-koekjes

JS Web API's

Introductie web-API Web Forms API Webgeschiedenis-API Webopslag-API Web Worker-API Web Fetch-API Webgeolocatie-API

JS AJAX

Ajax-intro AJAX XMLHttp Ajax-verzoek Ajax-reactie AJAX XML-bestand AJAX PHP Ajax ASP AJAX-database AJAX-toepassingen Ajax-voorbeelden

JS JSON

JSON-intro JSON-syntaxis JSON versus XML JSON-gegevenstypen JSON ontleden JSON Stringify JSON-objecten JSON-arrays JSON-server JSON PHP JSON HTML JSON JSONP

JS versus jQuery

jQuery-kiezers jQuery HTML jQuery CSS jQuery DOM

JS-graphics

JS-graphics JS Canvas JS Plotly JS Chart.js JS Google-kaart JS D3.js

JS-voorbeelden

JS-voorbeelden JS HTML DOM JS HTML-invoer JS HTML-objecten JS HTML-evenementen JS-browser JS-editor JS-oefeningen JS-quiz JS-certificaat

JS-referenties

JavaScript-objecten HTML DOM-objecten


JSON .parse()


Een veelgebruikt gebruik van JSON is het uitwisselen van gegevens van/naar een webserver.

Bij het ontvangen van gegevens van een webserver zijn de gegevens altijd een string.

Parseer de gegevens met JSON.parse(), en de gegevens worden een JavaScript-object.


Voorbeeld - JSON parseren

Stel je voor dat we deze tekst ontvangen van een webserver:

'{"name":"John", "age":30, "city":"New York"}'

Gebruik de JavaScript-functie JSON.parse()om tekst om te zetten in een JavaScript-object:

const obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');

Zorg ervoor dat de tekst de JSON-indeling heeft, anders krijgt u een syntaxisfout.

Gebruik het JavaScript-object op uw pagina:

Voorbeeld

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = obj.name;
</script>

Array als JSON

Bij gebruik van de JSON.parse()op een JSON die is afgeleid van een array, retourneert de methode een JavaScript-array in plaats van een JavaScript-object.

Voorbeeld

const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = JSON.parse(text);


Uitzonderingen

Datums ontleden

Datumobjecten zijn niet toegestaan ​​in JSON.

Als u een datum moet opnemen, schrijft u deze als een tekenreeks.

U kunt het later weer omzetten in een datumobject:

Voorbeeld

Converteer een string naar een datum:

const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);

document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Of u kunt de tweede parameter van de JSON.parse()functie gebruiken, genaamd reviver .

De reviver- parameter is een functie die elke eigenschap controleert voordat de waarde wordt geretourneerd.

Voorbeeld

Converteer een string naar een datum, met behulp van de reviver - functie:

const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});

document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Parseerfuncties

Functies zijn niet toegestaan ​​in JSON.

Als u een functie moet opnemen, schrijft u deze als een tekenreeks.

Je kunt het later weer in een functie omzetten:

Voorbeeld

Converteer een string naar een functie:

const text = '{"name":"John", "age":"function () {return 30;}", "city":"New York"}';
const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");

document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();

U moet het gebruik van functies in JSON vermijden, de functies verliezen hun bereik en u zou ze moeten gebruiken eval()om ze weer om te zetten in functies.