JSON.stringify()

Оглавление

    Показать оглавление

Обычно JSON используется для обмена данными с веб-сервером.

При отправке данных на веб-сервер данные должны быть строка.

Преобразуйте объект JavaScript в строку с помощью JSON.stringify().

Стробизация объекта JavaScript

Представьте, что у нас есть этот объект в JavaScript:

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

Используйте функцию JavaScript JSON.stringify(), чтобы преобразовать ее в строку.

const myJSON = JSON.stringify(obj);

Результатом будет строка в формате JSON.

myJSON теперь является строкой и готов к отправке на сервер:

Пример

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

Попробуйте сами →

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

В следующих главах вы узнаете, как отправить JSON на сервер.

Стробизация массива JavaScript

Также возможно преобразовать массивы JavaScript в строку:

Представьте, что у нас есть этот массив в JavaScript:

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

Используйте функцию JavaScript JSON.stringify(), чтобы преобразовать ее в строку.

const myJSON = JSON.stringify(arr);

Результатом будет строка в формате JSON.

myJSON теперь является строкой и готов к отправке на сервер:

Пример

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

Попробуйте сами →

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

В следующих главах вы узнаете, как отправить строку JSON на сервер.

Хранение данных

При хранении данных данные должны быть определенного формата, и независимо от того, где вы решите их хранить, текст всегда является одним из допустимых форматов.

JSON позволяет хранить объекты JavaScript в виде текста.

Пример

Хранение данных в локальном хранилище

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

Попробуйте сами →

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

Исключения

Строковые даты

В JSON объекты даты не допускаются. Функция JSON.stringify() преобразует любые даты в строки.

Пример

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

Попробуйте сами →

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

Вы можете преобразовать строку обратно в объект даты у получателя.

Строковые функции

В JSON функции не допускаются в качестве значений объекта.

Функция JSON.stringify() удалит любые функции из JavaScript. объект, как ключ, так и значение:

Пример

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

Попробуйте сами →

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

Это можно пропустить, если перед запуском вы преобразуете функции в строки. функция JSON.stringify().

Пример

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

Попробуйте сами →

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

Если вы отправляете функции с использованием JSON, функции теряют свою область видимости, а получатель придется использовать eval(), чтобы преобразовать их обратно в функции.