JSON.stringify()


Sisällysluettelo

    Näytä sisällysluettelo


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().


Striimaa JavaScript-objekti

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:

Esimerkki

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.


Striimaa JavaScript-taulukko

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:

Esimerkki

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.


Tietojen tallentaminen

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ä.

Esimerkki

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>


Poikkeukset

Rajoita päivämäärät

JSONissa päivämääräobjektit eivät ole sallittuja. Funktio JSON.stringify() muuntaa päivämäärät merkkijonoihin.

Esimerkki

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.


Stringify Functions

JSONissa funktioita ei sallita objektiarvoina.

JSON.stringify()-funktio poistaa kaikki funktiot JavaScriptistä objekti, sekä avain että arvo:

Esimerkki

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.

Esimerkki

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.