Загрузка...

JSON в JavaScript

Прошлая страница только меняла форму вызова, и this шёл за этим вызовом. Здесь мы это откладываем. Товар всё ещё в памяти: имя и цена сидят на самом объекте. Чтобы отдать те же факты файлу, другой программе или следующей странице, нужен текст с жёсткой формой. Этот текст называется JSON.

Живой объект — не эта записка

Пока скрипт работает, литерал на месте, и на него можно повесить метод; this по-прежнему зависит от формы вызова, как в прошлом уроке. JSON — только строка: методов в ней нет, и сама она this не выбирает.

Что тексту разрешено хранить

📊 Живой объект против текста JSON

Часть Литерал объекта Текст JSON
Кавычки ключа необязательны двойные кавычки обязательны
Кавычки строки одинарные или двойные только двойные
Запятая в конце допустима запрещена
Функция может быть методом stringify её опускает; вписанная в текст, она недопустима
Поле undefined настоящее значение пропадает, когда stringify обходит объект

Не переносите в этот текст привычки литерала. У каждого ключа и у каждой строки должны быть двойные кавычки. Лишняя запятая в конце, комментарий внутри текста и голая функция — это не годный JSON. Таблица показывает, какая привычка исчезает, а какую parse даже не принимает.

stringify пишет записку

javascript 
let product = {
name: "Mug",
price: 12
};
console.log(JSON.stringify(product));

stringify пишет записку

JSON.stringify обходит простые поля и возвращает одну строку; консоль показывает {"name":"Mug","price":12}, а сам product не меняется. Имя вы по-прежнему читаете у живого объекта и получаете Mug. Строка — отдельное значение, его можно сохранить или отправить.

parse собирает значение

javascript 
let text = '{"name":"Mug","price":12}';
let product = JSON.parse(text);
console.log(product.name);

parse собирает значение из записки

text всё ещё строка, вместе с кавычками и скобками. JSON.parse строит из этого текста новый объект. После этого product.name равно Mug. Здесь метод не вызывается, и this ни при чём.

Список внутри записки

javascript 
let text = '{"name":"Mug","tags":["ceramic","gift"]}';
let product = JSON.parse(text);
console.log(product.tags[0]);

Список может сидеть внутри записки

Текст JSON может нести массив; после parse свойство product.tags — настоящий массив, и первая ячейка равна ceramic. Массив как отдельная тема идёт следом, а здесь он только груз внутри текста.

Записка оставляет поведение

javascript 
let product = {
name: "Mug",
price: undefined,
tag() {
return this.name;
}
};
console.log(JSON.stringify(product));

Записка хранит данные, не поведение

price был undefined. tag был функцией. Оба исчезают из текста. Печатается только {"name":"Mug"}. Поведение остаётся на живом объекте и в записку не входит.

Небрежные кавычки не читаются

javascript 
let text = "{name:'Mug'}";
try {
JSON.parse(text);
console.log("ok");
} catch (err) {
console.log("bad text");
}

Небрежная записка не разбирается

Одинарные кавычки и ключ без кавычек допустимы в литерале и запрещены в JSON; поэтому JSON.parse бросает ошибку, а ветка catch печатает bad text вместо падения этой демонстрации. Поправьте текст двойными кавычками у ключа и у строки. Это ещё не урок про ошибки, а только показ того, что битый JSON останавливает parse.

Направление подсказывает инструмент

Из памяти в текст вы идёте через stringify, а из текста обратно в значение — через parse. Если функция на товаре понадобится позже, добавьте её после parse, потому что записка её не принесла. this по-прежнему зависит от вызова, а не от JSON, и следующий урок — массивы: живой список в скрипте, а не новое правило JSON.

Покажите одно поле из записки

Разберите небольшую строку товара через parse. Запишите имя в абзац. Не собирайте объект фигурными скобками внутри скрипта.

Демо страницы — имя из записки

html 
<!DOCTYPE html>
<html>
<head>
<title>json — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let text = '{"name":"Mug","price":12}';
let product = JSON.parse(text);
let box = document.getElementById("line");
box.textContent = product.name;
</script>
</body>
</html>

Абзац показывает Mug, потому что скрипт только разобрал текст и не строил литерал. Поменяйте имя внутри строки и обновите страницу, чтобы строка последовала за ним.

Шаги практики

  1. Примените stringify к кружке и прочитайте текст в кавычках, затем parse той же формы и увидьте Mug.
  2. Разберите записку с tags и прочитайте ceramic.
  3. Примените stringify к объекту с методом и ценой undefined, чтобы в тексте осталось только name, и положите записку с голым ключом в try / catch, пока не появится bad text.
  4. В HTML-демо поменяйте только имя внутри строки, обновите страницу и прочитайте абзац.

Частые срывы

  • Принять текст JSON за литерал объекта и отдать parse одинарные кавычки или голый ключ
  • Ждать, что метод или undefined переживут stringify
  • Звать parse, когда нужен был текст, или stringify, когда текст уже был, и читать имя у самой строки, а не у значения, которое вернул parse
  • Считать следующую страницу продолжением JSON, хотя массивы — это живой список

Коротко

  • JSON — текст, который описывает данные, а stringify превращает простой объект в этот текст
  • parse возвращает текст обратно в значение
  • Ключ и строка требуют двойных кавычек; лишняя запятая или одинарные кавычки роняют parse
  • Методы и поля undefined выпадают из текста
  • Разобранное поле может заполнить строку на странице, а дальше идут массивы, живой список в скрипте

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 37 из 38
Javascript Урок