Een tutorial over het werken met JSON.parse() en JSON.stringify()

Hark Labs2022-04-28 · 5 min read

Een tutorial over het werken met JSON.parse() en JSON.stringify()

JSON staat voor JavaScript Object Notation. Het wordt gebruikt om JavaScript objecten te beschrijven. Het is een formaat voor gegevensdeling dat gegevenswaarden specificeert met behulp van sleutel-waarde-paren. Het JSON-object wordt ondersteund door alle grote browsers. Deze handleiding vereist dat u bekend bent met JavaScript en het werken met het JSON-object. Om vertrouwd te raken met JSON, kunt u een kijkje nemen naar ons overzicht van het JSON-formaat voor gegevensdeling. U kunt ook bekijken hoe u kunt werken met JSON in JavaScript.

Het JSON-formaat wordt ook gebruikt om gegevens over het netwerk te verzenden. Hiervoor moeten gegevens worden geserialiseerd en gedeserialiseerd. Wanneer de gegevens in het JSON-formaat zijn, worden ze omgezet in een string met behulp van de stringify methode. Om de gegevens weer om te zetten naar het objectformaat voor manipulatie, wordt de parse methode gebruikt. Deze handleiding zal de stappen doorlopen voor het gebruik van JSON.parse() en JSON.stringify(). Laten we beginnen!

JSON.parse()

Deze methode wordt gebruikt om een JSON-string om te zetten in een JSON-object, zodat deze programmatisch kan worden gemanipuleerd. De doorgegeven string moet een geldige JSON-string zijn, anders wordt er een uitzondering gegenereerd. Deze string kan worden ontvangen van elke webservice of externe applicatie.

Deze methode accepteert twee parameters: een string en een callback-functie die kan worden gebruikt om de string te manipuleren voordat deze in een object wordt omgezet. Stel dat we een bericht ontvangen van een webservice dat de status van de actie, het bericht en de statuscode aangeeft. Hieronder vindt u een eenvoudig voorbeeld van hoe een string kan worden omgezet in een object.

Code:

let json_string = '{"message":"Done with success", "status":200, "code":200}'
let server_obj = JSON.parse(json_string);
console.log(server_obj)

let json_string = '{"message":"Done with success", "status":200, "code":200}'

let server_obj = JSON.parse(json_string);

console.log(server_obj)

Output:

{message: 'Done with success', status: 200, code: 200}

1	{message: 'Done with success', status: 200, code: 200}

Een veelvoorkomend probleem is wanneer er komma's aan het einde van de string worden toegevoegd, waardoor JSON.parse() een foutmelding geeft als de doorgegeven string komma's aan het einde heeft. Als u de waarden wilt manipuleren, kunt u de callback-functie als tweede argument doorgeven.

Code:

let string = '{"name":"XYZ","email":"xyz@example.com"}';
let obj = JSON.parse(string, (key, value) => {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
return value;
});

console.log(obj)

let string = '{"name":"XYZ","email":"xyz@example.com"}';

let obj = JSON.parse(string, (key, value) => {

if (typeof value === 'string') {

return value.toUpperCase();

}

return value;

});

console.log(obj)

Output:

{name: 'XYZ', email: 'XYZ@EXAMPLE.COM'}

1	{name: 'XYZ', email: 'XYZ@EXAMPLE.COM'}

JSON.stringify()

De stringify methode doet precies het tegenovergestelde van de parse methode. Hier wordt het JSON-object doorgegeven en is de retourwaarde een string. Deze string kan bijvoorbeeld naar een andere externe webservice worden verzonden en vervolgens weer worden geparsed naar een JSON-object voor manipulatie.

Code:

let obj = {message:"Done with success", status:200, code:200}
let str = JSON.stringify(obj);
console.log(str);

let obj = {message:"Done with success", status:200, code:200}

let str = JSON.stringify(obj);

console.log(str);

Output:

{"message":"Done with success","status":200,"code":200}

1	{"message":"Done with success","status":200,"code":200}

De stringify-methode kan twee argumenten aannemen: replaceren spacer methoden. De replacer methode kan worden gebruikt om waarden in de string te vervangen of uit te sluiten.

Code:

let obj = {message:"Done with success", status:200, code:200}
let str = JSON.stringify(obj, (key, value) => {
    if (status === 200) {
        return undefined;
    }
    return value;
});

console.log(str)

let obj = {message:"Done with success", status:200, code:200}

let str = JSON.stringify(obj, (key, value) => {

if (status === 200) {

return undefined;

}

return value;

});

console.log(str)

Output:

{"message":"Succesvol voltooid","status":200,"code":200}

1	{"message":"Succesvol voltooid","status":200,"code":200}

Wanneer het spacer argument wordt meegegeven, wordt elk element van een array of object op een eigen regel geplaatst en ingesprongen om de diepte in de hiërarchie van de objecten en arrays aan te geven. Hieronder staat een eenvoudig codefragment dat dit illustreert.

Code:

let obj = {message:"Succesvol voltooid", status:200, code:200}
let str = JSON.stringify(obj, null, "---");
console.log(str)

let obj = {message:"Succesvol voltooid", status:200, code:200}

let str = JSON.stringify(obj, null, "---");

console.log(str)

Output:

{
---"message": "Succesvol voltooid",
---"status": 200,
---"code": 200
}

{

---"message": "Succesvol voltooid",

---"status": 200,

---"code": 200

}

Conclusie

In deze tutorial hebben we gekeken naar twee handige methoden om met in JSON-indeling opgemaakte inhoud te werken. JSON-objecten zijn overal en bij het bouwen van moderne applicaties met JavaScript zijn deze methoden zeer nuttig. Bekijk voor meer informatie de volgende tutorials op onze blog:

Veel programmeerplezier!

Hark Labs

Auteur · CloudSigma

Preslav Dobrev is een creatief ontwerper bij CloudSigma, met de nadruk op een consistente bedrijfsidentiteit door middel van traditionele en innovatieve marketingkanalen. Hij is bedreven in het samenvoegen van artistieke visie met strategische marketing om impactvolle merkverhalen te creëren.

Een tutorial over het werken met JSON.parse() en JSON.stringify()

JSON.parse()

JSON.stringify()

Conclusie

Hark Labs

Reacties