JSONin yleinen käyttö on tiedon vaihtaminen verkkopalvelimelle/palvelimelta.
Kun dataa lähetetään web-palvelimelle, datan on oltava nauha.
Muunna JavaScript-objekti merkkijonoksi komennolla JSON.stringify()
.
Kuvittele, että meillä on tämä objekti JavaScriptissä:
const obj = {name: "John", age: 30, city: "New York"};
Muunna se merkkijonoksi JavaScript-funktiolla JSON.stringify()
.
const myJSON = JSON.stringify(obj);
Tuloksena on merkkijono, joka seuraa JSON-merkintää.
myJSON
on nyt merkkijono ja valmis lähetettäväksi palvelimelle:
const obj = {name: "John", age: 30, city: "New York"};
const myJSON =
JSON.stringify(obj);
Kokeile itse →
<!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>
Opit kuinka lähettää JSON palvelimelle seuraavissa luvuissa.
JavaScript-taulukoita on myös mahdollista joustaa:
Kuvittele, että meillä on tämä matriisi JavaScriptissä:
const arr = ["John", "Peter", "Sally", "Jane"];
Muunna se merkkijonoksi JavaScript-funktiolla JSON.stringify()
.
const myJSON = JSON.stringify(arr);
Tuloksena on merkkijono, joka seuraa JSON-merkintää.
myJSON
on nyt merkkijono ja valmis lähetettäväksi palvelimelle:
const arr = ["John", "Peter", "Sally", "Jane"];
const myJSON =
JSON.stringify(arr);
Kokeile itse →
<!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>
Seuraavissa luvuissa opit lähettämään JSON-merkkijonon palvelimelle.
Tietoja tallennettaessa tietojen on oltava tietyssä muodossa ja riippumatta siitä, mihin ne tallennetaan, teksti on aina yksi laillisista muodoista.
JSON mahdollistaa JavaScript-objektien tallentamisen tekstinä.
Tietojen tallennus paikalliseen tallennustilaan
// 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;
Kokeile itse →
<!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>
JSONissa päivämääräobjektit eivät ole sallittuja. Funktio JSON.stringify()
muuntaa päivämäärät merkkijonoihin.
const obj = {name: "John", today: new Date(), city : "New York"};
const myJSON = JSON.stringify(obj);
Kokeile itse →
<!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>
Voit muuntaa merkkijonon takaisin päivämääräobjektiksi vastaanottimessa.
JSONissa funktioita ei sallita objektiarvoina.
JSON.stringify()
-funktio poistaa kaikki funktiot JavaScriptistä objekti, sekä avain että arvo:
const obj = {name: "John", age: function () {return 30;}, city: "New York"};
const myJSON = JSON.stringify(obj);
Kokeile itse →
<!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>
Tämä voidaan jättää pois, jos muunnat funktiot merkkijonoiksi ennen suorittamista JSON.stringify()
-funktio.
const obj = {name: "John", age: function () {return 30;}, city: "New York"};
obj.age = obj.age.toString();
const myJSON = JSON.stringify(obj);
Kokeile itse →
<!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>
Jos lähetät toimintoja JSON:n avulla, funktiot menettävät soveltamisalansa ja vastaanottajan pitäisi käyttää eval()-komentoa muuttaakseen ne takaisin funktioiksi.