JSON.stringify()

Indholdsfortegnelse

En almindelig brug af JSON er at udveksle data til/fra en webserver.

Når data sendes til en webserver, skal dataene være en snor.

Konverter et JavaScript-objekt til en streng med JSON.stringify().

Stringificer et JavaScript-objekt

Forestil dig, at vi har dette objekt i JavaScript:

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

Brug JavaScript-funktionen JSON.stringify() til at konvertere den til en streng.

const myJSON = JSON.stringify(obj);

Resultatet vil være en streng efter JSON-notationen.

myJSON er nu en streng og klar til at blive sendt til en server:

Eksempel

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

Prøv det selv →

<!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 vil lære, hvordan du sender JSON til en server i de næste kapitler.

Stringificer et JavaScript-array

Det er også muligt at stringify JavaScript-arrays:

Forestil dig, at vi har dette array i JavaScript:

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

Brug JavaScript-funktionen JSON.stringify() til at konvertere den til en streng.

const myJSON = JSON.stringify(arr);

Resultatet vil være en streng efter JSON-notationen.

myJSON er nu en streng og klar til at blive sendt til en server:

Eksempel

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

Prøv det selv →

<!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 vil lære, hvordan du sender en JSON-streng til en server i de næste kapitler.

Lagring af data

Ved lagring af data skal dataene være i et bestemt format, og uanset hvor du vælger at gemme dem, tekst er altid et af de juridiske formater.

JSON gør det muligt at gemme JavaScript-objekter som tekst.

Eksempel

Lagring af data på lokalt lager

 // 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;

Prøv det selv →

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

Undtagelser

Stringify datoer

I JSON er datoobjekter ikke tilladt. Funktionen JSON.stringify() konverterer eventuelle datoer i strenge.

Eksempel

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

Prøv det selv →

<!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 konvertere strengen tilbage til et datoobjekt ved modtageren.

Stringify funktioner

I JSON er funktioner ikke tilladt som objektværdier.

Funktionen JSON.stringify() fjerner alle funktioner fra et JavaScript objekt, både nøglen og værdien:

Eksempel

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

Prøv det selv →

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

Dette kan udelades, hvis du konverterer dine funktioner til strenge, inden du kører funktionen JSON.stringify().

Eksempel

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

Prøv det selv →

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

Hvis du sender funktioner ved hjælp af JSON, mister funktionerne deres omfang og modtageren skulle bruge eval() for at konvertere dem tilbage til funktioner.