// Tutorial //

Verwenden von JSON.parse() und JSON.stringify()

Published on November 16, 2020
Default avatar
By Alligator.io
Developer and author at DigitalOcean.
Deutsch
Verwenden von JSON.parse() und JSON.stringify()

Einführung

Das in allen modernen Browsern verfügbare JSON-Objekt verfügt über zwei nützliche Methoden, um mit JSON-formatierten Inhalten umzugehen: parse und stringify. JSON.parse() nimmt eine JSON-Zeichenfolge und transformiert sie in ein JavaScript-Objekt. JSON.stringify() verwendet ein JavaScript-Objekt und transformiert es in eine JSON-Zeichenfolge.

Hier ist ein Beispiel:

const myObj = {
  name: 'Skip',
  age: 2,
  favoriteFood: 'Steak'
};

const myObjStr = JSON.stringify(myObj);

console.log(myObjStr);
// "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"

console.log(JSON.parse(myObjStr));
// Object {name:"Sammy",age:6,favoriteFood:"Tofu"}

Und obwohl die Methoden normalerweise bei Objekten verwendet werden, können sie auch bei Arrays verwendet werden:

const myArr = ['bacon', 'lettuce', 'tomatoes'];

const myArrStr = JSON.stringify(myArr);

console.log(myArrStr);
// "["shark","fish","dolphin"]"

console.log(JSON.parse(myArrStr));
// ["shark","fish","dolphin"]

JSON.parse()

JSON.parse() kann eine Funktion als zweites Argument übernehmen, das die Objektwerte ändern kann, bevor sie zurückgegeben werden. Hier werden die Werte des Objekts im zurückgegebenen Objekt der Methode parse in Großbuchstaben transformiert:

const user = {
  name: 'Sammy',
  email: 'Sammy@domain.com',
  plan: 'Pro'
};

const userStr = JSON.stringify(user);

JSON.parse(userStr, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});

Hinweis: Nachkommas sind in JSON nicht gültig, sodass JSON.parse() eine Fehlermeldung auslöst, wenn die übergebene Zeichenfolge Nachkommas enthält.

JSON.stringify()

JSON.stringify() kann zwei zusätzliche Argumente annehmen, wobei das erste eine Ersatzfunktion und das zweite ein Zeichenfolgen- oder Zahlenwert ist, der als Leerzeichen in der zurückgegebenen Zeichenfolge zu verwenden ist.

Die Ersatzfunktion kann zum Herausfiltern von Werten verwendet werden, da jeder als undefiniert zurückgegebene Wert aus der zurückgegebenen Zeichenfolge herausfällt:

const user = {
  id: 229,
  name: 'Sammy',
  email: 'Sammy@domain.com'
};

function replacer(key, value) {
  console.log(typeof value);
  if (key === 'email') {
    return undefined;
  }
  return value;
}

const userStr = JSON.stringify(user, replacer);
// "{"id":229,"name":"Sammy"}"

Und ein Beispiel mit einem eingefügten Raum-Argument:

const user = {
  name: 'Sammy',
  email: 'Sammy@domain.com',
  plan: 'Pro'
};

const userStr = JSON.stringify(user, null, '...');
// "{
// ..."name": "Sammy",
// ..."email": "Sammy@domain.com",
// ..."plan": "Pro"
// }"

Zusammenfassung

In diesem Tutorial haben Sie untersucht, wie die Methoden JSON.parse() und JSON.stringify() verwendet werden.  Wenn Sie mehr über die Arbeit mit JSON in Javascript erfahren möchten, lesen Sie unser Tutorial Wie man mit JSON in JavaScript arbeitet.

Weitere Informationen zum Kodieren in JavaScript finden Sie in unserer Reihe Wie man in JavaScript kodiert oder sehen Sie sich unsere JavaScript-Seite Übungen und Programmierprojekte an.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Developer and author at DigitalOcean.

Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment
Leave a comment...

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click here to Sign up and get $200 of credit to try our products over 60 days!