JSON.stringify()


Innehållsförteckning

    Visa innehållsförteckning


En vanlig användning av JSON är att utbyta data till/från en webbserver.

När data skickas till en webbserver måste data vara ett snöre.

Konvertera ett JavaScript-objekt till en sträng med JSON.stringify().


Stringifiera ett JavaScript-objekt

Föreställ dig att vi har detta objekt i JavaScript:

const obj = {name: "John", age: 30, city: "New York"};

Använd JavaScript-funktionen JSON.stringify() för att konvertera den till en sträng.

const myJSON = JSON.stringify(obj);

Resultatet blir en sträng efter JSON-notationen.

myJSON är nu en sträng och redo att skickas till en server:

Exempel

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

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>Create a JSON string from a JavaScript object.</h2>
<p id="demo"></p>

<script>
const obj = {name: "John", age: 30, city: "New York"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Du kommer att lära dig hur du skickar JSON till en server i nästa kapitel.


Stringifiera en JavaScript-array

Det är också möjligt att strängsätta JavaScript-matriser:

Föreställ dig att vi har den här arrayen i JavaScript:

const arr = ["John", "Peter", "Sally", "Jane"];

Använd JavaScript-funktionen JSON.stringify() för att konvertera den till en sträng.

const myJSON = JSON.stringify(arr);

Resultatet blir en sträng efter JSON-notationen.

myJSON är nu en sträng och redo att skickas till en server:

Exempel

const arr = ["John", "Peter", "Sally", "Jane"];
const myJSON = 
  JSON.stringify(arr);
  

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>Create a JSON string from a JavaScript array.</h2>
<p id="demo"></p>

<script>
const arr = ["John", "Peter", "Sally", "Jane"];
const myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Du kommer att lära dig hur du skickar en JSON-sträng till en server i nästa kapitel.


Lagra data

När du lagrar data måste data vara ett visst format, och oavsett var du väljer att lagra den, text är alltid ett av de juridiska formaten.

JSON gör det möjligt att lagra JavaScript-objekt som text.

Exempel

Lagring av data i lokal lagring

 // Storing data:
const myObj = {name: "John", 
  age: 31, city: "New York"};
const myJSON = 
  JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

  // Retrieving data:
let text = localStorage.getItem("testJSON");
let obj = 
  JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>Store and retrieve data from local storage.</h2>
<p id="demo"></p>

<script>
// Storing data:
const myObj = { name: "John", age: 31, city: "New York" };
const myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

// Retrieving data:
let text = localStorage.getItem("testJSON");
let obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;
</script>

</body>
</html>


Undantag

Stringifiera datum

I JSON är datumobjekt inte tillåtna. Funktionen JSON.stringify() konverterar alla datum i strängar.

Exempel

const obj = {name: "John", today: new Date(), city : "New York"};
const myJSON = JSON.stringify(obj);

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify() converts date objects into strings.</h2>
<p id="demo"></p>

<script>
const obj = {name: "John", today: new Date(), city: "New York"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Du kan konvertera tillbaka strängen till ett datumobjekt vid mottagaren.


Stringifiera funktioner

I JSON är funktioner inte tillåtna som objektvärden.

Funktionen JSON.stringify() tar bort alla funktioner från en JavaScript objekt, både nyckeln och värdet:

Exempel

const obj = {name: "John", age: function () {return 30;}, city: "New York"};
const myJSON = JSON.stringify(obj);

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify() will remove any functions from an object.</h2>
<p id="demo"></p>

<script>
const obj = {name: "John", age: function () {return 30;}, city: "New York"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Detta kan utelämnas om du konverterar dina funktioner till strängar innan du kör funktionen JSON.stringify().

Exempel

const obj = {name: "John", age: function () {return 30;}, city: "New York"};
  obj.age = obj.age.toString();
const myJSON = JSON.stringify(obj);

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify() will remove any functions from an object.</h2>
<p>Convert functions into strings to keep them in the JSON object.</p>

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

<script>
const obj = {name: "John", age: function () {return 30;}, city: "New York"};
obj.age = obj.age.toString();
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Om du skickar funktioner med JSON kommer funktionerna att förlora sin omfattning och mottagaren skulle behöva använda eval() för att konvertera dem tillbaka till funktioner.