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()
.
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:
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.
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:
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.
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.
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>
I JSON är datumobjekt inte tillåtna. Funktionen JSON.stringify()
konverterar alla datum i strängar.
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.
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:
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()
.
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.