JSON.stringify()

Obsah

Běžným použitím JSON je výměna dat do/z webového serveru.

Při odesílání dat na webový server musí být data řetězec.

Převeďte objekt JavaScriptu na řetězec pomocí JSON.stringify().

Stringifikace objektu JavaScriptu

Představte si, že máme tento objekt v JavaScriptu:

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

K převodu na řetězec použijte JavaScriptovou funkci JSON.stringify().

const myJSON = JSON.stringify(obj);

Výsledkem bude řetězec následující za zápisem JSON.

myJSON je nyní řetězec a je připraven k odeslání na server:

Příklad

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

Zkuste to sami →

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

V dalších kapitolách se dozvíte, jak odeslat JSON na server.

Stringifikace pole JavaScriptu

Je také možné stringifikovat pole JavaScriptu:

Představte si, že máme toto pole v JavaScriptu:

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

K převodu na řetězec použijte JavaScriptovou funkci JSON.stringify().

const myJSON = JSON.stringify(arr);

Výsledkem bude řetězec následující za zápisem JSON.

myJSON je nyní řetězec a je připraven k odeslání na server:

Příklad

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

Zkuste to sami →

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

V dalších kapitolách se dozvíte, jak odeslat řetězec JSON na server.

Ukládání dat

Při ukládání dat musí mít data určitý formát a bez ohledu na to, kam je chcete uložit, text je vždy jedním z legálních formátů.

JSON umožňuje ukládat objekty JavaScriptu jako text.

Příklad

Ukládání dat do místního úložiště

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

Zkuste to sami →

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

Výjimky

Stringify Dates

V JSON nejsou povoleny objekty data. Funkce JSON.stringify() se převede libovolná data do řetězců.

Příklad

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

Zkuste to sami →

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

Řetězec můžete převést zpět na objekt data v přijímači.

Funkce stringifikace

V JSON nejsou funkce povoleny jako hodnoty objektů.

Funkce JSON.stringify() odstraní z JavaScriptu všechny funkce objekt, klíč i hodnota:

Příklad

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

Zkuste to sami →

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

To lze vynechat, pokud své funkce před spuštěním převedete na řetězce funkce JSON.stringify().

Příklad

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

Zkuste to sami →

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

Pokud odešlete funkce pomocí JSON, funkce ztratí svůj rozsah i příjemce bude muset použít eval(), aby je převedl zpět na funkce.