Javascript работа с json

Допустим, у нас есть сложный объект, и мы хотели бы преобразовать его в строку, чтобы отправить по сети или просто вывести для логирования.

Естественно, такая строка должна включать в себя все важные свойства.

Мы могли бы реализовать преобразование следующим образом:

…Но в процессе разработки добавляются новые свойства, старые свойства переименовываются и удаляются. Обновление такого toString каждый раз может стать проблемой. Мы могли бы попытаться перебрать свойства в нём, но что, если объект сложный, и в его свойствах имеются вложенные объекты? Мы должны были бы осуществить их преобразование тоже.

К счастью, нет необходимости писать код для обработки всего этого. У задачи есть простое решение.

JSON.stringify

JSON (JavaScript Object Notation) – это общий формат для представления значений и объектов. Его описание задокументировано в стандарте RFC 4627. Первоначально он был создан для JavaScript, но многие другие языки также имеют библиотеки, которые могут работать с ним. Таким образом, JSON легко использовать для обмена данными, когда клиент использует JavaScript, а сервер написан на Ruby/PHP/Java или любом другом языке.

JavaScript предоставляет методы:

• JSON.stringify для преобразования объектов в JSON.
• JSON.parse для преобразования JSON обратно в объект.

Например, здесь мы преобразуем через JSON.stringify данные студента:

Метод JSON.stringify(student) берёт объект и преобразует его в строку.

Полученная строка json называется JSON-форматированным или сериализованным объектом. Мы можем отправить его по сети или поместить в обычное хранилище данных.

Обратите внимание, что объект в формате JSON имеет несколько важных отличий от объектного литерала:

• Строки используют двойные кавычки. Никаких одинарных кавычек или обратных кавычек в JSON. Так ‘John’ становится "John" .
• Имена свойств объекта также заключаются в двойные кавычки. Это обязательно. Так age:30 становится "age":30 .

JSON.stringify может быть применён и к примитивам.

JSON поддерживает следующие типы данных:

• Объекты
• Массивы [ . ]
• Примитивы:

• строки,
• числа,
• логические значения true/false ,
• null .

JSON является независимой от языка спецификацией для данных, поэтому JSON.stringify пропускает некоторые специфические свойства объектов JavaScript.

• Свойства-функции (методы).
• Символьные свойства.
• Свойства, содержащие undefined .

Обычно это нормально. Если это не то, чего мы хотим, то скоро мы увидим, как можно настроить этот процесс.

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

Важное ограничение: не должно быть циклических ссылок.

Здесь преобразование завершается неудачно из-за циклической ссылки: room.occupiedBy ссылается на meetup , и meetup.place ссылается на room :

Исключаем и преобразуем: replacer

Полный синтаксис JSON.stringify :

В большинстве случаев JSON.stringify используется только с первым аргументом. Но если нам нужно настроить процесс замены, например, отфильтровать циклические ссылки, то можно использовать второй аргумент JSON.stringify .

Если мы передадим ему массив свойств, будут закодированы только эти свойства.

Здесь мы, наверное, слишком строги. Список свойств применяется ко всей структуре объекта. Так что внутри participants – пустые объекты, потому что name нет в списке.

Давайте включим в список все свойства, кроме room.occupiedBy , из-за которого появляется цикличная ссылка:

Теперь всё, кроме occupiedBy , сериализовано. Но список свойств довольно длинный.

К счастью, в качестве replacer мы можем использовать функцию, а не массив.

Функция будет вызываться для каждой пары (key, value) , и она должна возвращать заменённое значение, которое будет использоваться вместо исходного. Или undefined , чтобы пропустить значение.

В нашем случае мы можем вернуть value «как есть» для всего, кроме occupiedBy . Чтобы игнорировать occupiedBy , код ниже возвращает undefined :

Обратите внимание, что функция replacer получает каждую пару ключ/значение, включая вложенные объекты и элементы массива. И она применяется рекурсивно. Значение this внутри replacer – это объект, который содержит текущее свойство.

Первый вызов – особенный. Ему передаётся специальный «объект-обёртка»: <"": meetup>. Другими словами, первая (key, value) пара имеет пустой ключ, а значением является целевой объект в общем. Вот почему первая строка из примера выше будет ":[object Object]" .

Идея состоит в том, чтобы дать как можно больше возможностей replacer – у него есть возможность проанализировать и заменить/пропустить даже весь объект целиком, если это необходимо.

Форматирование: space

Третий аргумент в JSON.stringify(value, replacer, space) – это количество пробелов, используемых для удобного форматирования.

Ранее все JSON-форматированные объекты не имели отступов и лишних пробелов. Это нормально, если мы хотим отправить объект по сети. Аргумент space используется исключительно для вывода в удобочитаемом виде.

Ниже space = 2 указывает JavaScript отображать вложенные объекты в несколько строк с отступом в 2 пробела внутри объекта:

Параметр space применяется для логирования и красивого вывода.

Пользовательский «toJSON»

Как и toString для преобразования строк, объект может предоставлять метод toJSON для преобразования в JSON. JSON.stringify автоматически вызывает его, если он есть.

Как видим, date (1) стал строкой. Это потому, что все объекты типа Date имеют встроенный метод toJSON , который возвращает такую строку.

Теперь давайте добавим собственную реализацию метода toJSON в наш объект room (2) :

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Рекомендованное ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

Разное

Работа с канвасом

Практика

• урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
  Работа с
  AJAX в JavaScript —>
  Работа с
  AJAX + PHP —>

Контекст

Drag-and-Drop

• Урок №
  Введение
  в ООП в стиле ES6
• Урок №
  Основы
  работы с ООП
• Урок №
  Наследование
  классов в JavaScript
  Продвинутая работа
  с классами на JavaScript —>
• Урок №
  Применение
  ООП при работе с DOM
• Урок №
  Практика
  по ООП в JavaScript
• Тут скоро будут еще уроки
  по функциональному и прототипному
  стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

Сейчас мы с вами будем разбираться с форматом JSON (читается ‘джейсон’). Этот формат удобен для компактного хранения данных, а также для обмена данными между сайтами или между сайтом и браузером.

Формат JSON

Сам JSON представляет собой строку. В этой строке данные хранятся в формате, похожим на обычные объекты JavaScript. Но есть отличия: все строки (как ключи, так и значения) обязательно должны быть в двойных кавычках. Одинарные кавычки и ключи без кавычек запрещены.

Кроме того: числа в кавычки можно не брать, разрешены значения null и true/false. Также в качестве значений могут быть массивы и объекты любого уровня вложенности.

Давайте посмотрим на строки с корректным JSON:

А вот этот JSON будет некорректным:

Давайте теперь рассмотрим методы для работы с JSON.

Метод JSON.parse

Метод JSON.parse преобразует строку с JSON в обычный объект JavaScipt, с которым можно будет работать дальше обычными средствами:

Метод JSON.stringify

Метод JSON.stringify преобразует объекты JavaScript в строку JSON. Посмотрим на следующих примерах:

В результате преобразования получится такая строка:

Учтите, что NaN и Infinity преобразуются в null:

В результате преобразования получится такая строка:

Преобразование объекта в JSON называется сериализацией (говорят: сериализуем объект в строку).

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

Наверняка вы когда-нибудь слышали о JSON. Что же это такое? Что он может и как его использовать?

В данном уроке мы расскажем об основах JSON и раскроем следующие пункты:

• Что такое JSON?
• Для чего используется JSON?
• Как создать строку JSON?
• Простой пример строки JSON.
• Сравним JSON и XML.
• Как работать с JSON в JavaScript и PHP?

Что такое JSON?

JSON — простой, основанный на использовании текста, способ хранить и передавать структурированные данные. С помощью простого синтаксиса вы можете легко хранить все, что угодно, начиная от одного числа до строк, массивов и объектов, в простом тексте. Также можно связывать между собой массивы и объекты, создавая сложные структуры данных.

После создания строки JSON, ее легко отправить другому приложению или в другое место сети, так как она представляет собой простой текст.

JSON имеет следующие преимущества:

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

Название JSON означает JavaScript Object Notation (представление объектов JavaScript). Как и представляет имя, он основан на способе определения объектов (очень похоже на создание ассоциативных массивов в других языках) и массивов.

Для чего используется JSON?

Наиболее частое распространенное использование JSON — пересылка данных от сервера к браузеру. Обычно данные JSON доставляются с помощью AJAX, который позволяет обмениваться данными браузеру и серверу без необходимости перезагружать страницу.

1. Пользователь нажимает миниатюру продукта в онлайн магазине.
2. JavaScript, выполняющийся на браузере, генерирует запрос AJAX к скрипту PHP, запущенному на сервере, передавая ID выбранного продукта.
3. Скрипт PHP получает название продукта, описание, цену и другую информацию из базы данных. Затем составляет из данных строку JSON и отсылает ее браузеру.
4. JavaScript, выполняющийся на браузере, получает строку JSON, декодирует ее и выводит информацию о продукте на странице для пользователя.

Также можно использовать JSON для отправки данных от браузера на сервер, передавая строку JSON в качестве параметра запросов GET или POST. Но данный метод имеет меньшее распространение, так как передача данных через запросы AJAX может быть упрощена. Например, ID продукта может быть включен в адрес URL как часть запроса GET.

Библиотека jQuery имеет несколько методов, например, getJSON() и parseJSON() , которые упрощают получение данных с помощью JSON через запросы AJAX.

Как создать строку JSON?

Есть несколько основных правил для создания строки JSON:

• Строка JSON содержит либо массив значений, либо объект (ассоциативный массив пар имя/значение).
• Массив заключается в квадратные скобки ( [ и ] ) и содержит разделенный запятой список значений.
• Объект заключается в фигурные скобки ( < и >) и содержит разделенный запятой список пар имя/значение.
• Пара имя/значение состоит из имени поля, заключенного в двойные кавычки, за которым следует двоеточие ( : ) и значение поля.
• Значение в массиве или объекте может быть:

• Числом (целым или с плавающей точкой)
• Строкой (в двойных кавычках)
• Логическим значением ( true или false )
• Другим массивом (заключенным в квадратные скобки)
• Другой объект (заключенный в фигурные скобки)
• Значение null

Чтобы включить двойные кавычки в строку, нужно использовать обратную косую черту: " . Так же, как и во многих языках программирования, можно помещать управляющие символы и шестнадцатеричные коды в строку, предваряя их обратной косой чертой. Смотрите детали на сайте JSON.

Простой пример строки JSON

Ниже приводится пример оформления заказа в формате JSON:

Рассмотрим строку подробно:

• Мы создаем объект с помощью фигурных скобок ( < и >).
• В объекте есть несколько пар имя/значение: "orderID": 12345 Свойство с именем "orderId" и целочисленным значением 12345 "shopperName": "Ваня Иванов" свойство с именем "shopperName" и строковым значением "Ваня Иванов" "shopperEmail": "[email protected]" Свойство с именем "shopperEmail" и строковым значением "[email protected]" "contents": [ . ] Свойство с именем "contents" , значение которого является массивом "orderCompleted": true Свойство с именем "orderCompleted" и логическим значением true
• В массиве "contents" есть 2 объекта, представляющие отдельные позиции в заказе. Каждый объект содержит 3 свойства: productID , productName , и quantity .

Кстати, так как JSON основан на объявлении объектов JavaScript, то вы можете быстро и просто сделать выше приведенную строку JSON объектом JavaScript:

Сравнение JSON и XML

Во многих отношениях вы можете рассматривать JSON как альтернативу XML, по крайней мере, в сфере веб приложений. Концепция AJAX оригинально основывалась на использовании XML для передачи данных между сервером и браузером. Но в последние годы JSON становится все более популярным для переноса данных AJAX.

Хотя XML является проверенной технологией, которая используется в достаточном количестве приложений, преимуществами JSON являются более компактный и простой для распознавания формат данных.

Вот как будет выглядеть выше приведенный пример объекта на XML:

Версия XML имеет существенно больший размер. В действительности она имеет длину 1128 символов, а вариант JSON — только 323 символа. Версию XML также достаточно трудно воспринимать.

Конечно, это радикальный пример. И возможно создать более компактную запись XML. Но даже она будет существенно длиннее эквивалента на JSON.

Работаем со строкой JSON в JavaScript

JSON имеет простой формат, но создавать строку JSON вручную достаточно утомительно. Кроме того, часто нужно взять строку JSON, конвертировать ее содержание в переменную, которую можно будет использовать в коде.

Большинство языков программирования имеют инструменты для простого преобразования переменных в строки JSON и наоборот.

Создаем строку JSON из переменной

JavaScript имеет встроенный метод JSON.stringify() , который берет переменную и возвращает строку JSON, представляющую ее содержание. Например, создадим объект JavaScript, который содержит сведения о заказе из нашего примера, а затем создадим из него строку JSON:

Данный код выдаст:

Обратите внимание, что метод JSON.stringify() возвращает строку JSON без пробелов. Ее сложнее читать, но зато она более компактна для передачи через сеть.

Создаем переменную из строки JSON

Существует несколько способов разобрать строку JSON в JavaScript, но самый безопасный и надежный — использовать встроенный метод JSON.parse() . Он получает строку JSON и возвращает объект или массив JavaScript, который содержит данные. Например:

Мы создали переменную jsonString , которая содержит строку JSON нашего примера с заказом. Затем мы передаем данную строку методу JSON.parse() , который создает объект, содержащий данные JSON и сохраняет его в переменной cart . Остается только осуществить проверку, выведя свойства объекта shopperEmail и productName массива contents .

В результате мы получим следующий вывод:

В реальном приложении ваш JavaScript код будет получать заказ в виде строки JSON в AJAX ответе от скрипта сервера, передавать строку методу JSON.parse() , а затем использовать данные для отображения на странице пользователя.

JSON.stringify() и JSON.parse() имеют другие возможности, такие как использование возвратных функций для пользовательской конвертации определённых данных. Такие опции очень удобны для конвертации различных данных в правильные объекты JavaScript.

Работаем со строкой JSON в PHP

PHP, как и JavaScript, имеет встроенные функции для работы с JSON строками.

Создаем строку JSON из переменной PHP

Функция json_encode() принимает переменную PHP и возвращает строку JSON, представляющую содержание переменной. Вот наш пример с заказом, написанный на PHP:

Данный код возвращает абсолютно такую же строку JSON, как и в примере с JavaScript:

В реальном приложении ваш скрипт PHP пришлет данную строку JSON как часть AJAX ответа браузеру, где JavaScript код с помощью метода JSON.parse() преобразует ее обратно в переменную для вывода на странице пользователя.

Вы может передавать различные флаги в качестве второго аргумента функции json_encode() . С их помощью можно изменять принципы кодирования содержания переменных в строку JSON.

Создаем переменную из строки JSON

Для преобразования строки JSON в переменную PHP используется метод json_decode() . Заменим наш пример для JavaScript с методом JSON.parse() на код PHP:

Как и для JavaScript данный код выдаст:

По умолчанию функция json_decode() возвращает объекты JSON как объекты PHP. Существуют обобщенные объекты PHP класса stdClass . Поэтому мы используем -> для доступа к свойствам объекта в примере выше.

Если вам нужен объект JSON в виде ассоциированного массива PHP, нужно передать true в качестве второго аргумента функции json_decode() . Например:

Данный код выдаст такой же вывод:

Также функции json_decode() можно передавать другие аргументы для указания глубины рекурсии и способов обработки больших целых чисел.

Заключение

Хотя JSON прост для понимания и использования, он является очень полезным и гибким инструментом для передачи данных между приложениями и компьютерами, особенно при использовании AJAX. Если вы планируете разрабатывать AJAX приложение, то нет сомнений, что JSON станет важнейшим инструментом в вашей мастерской.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/json-basics/
Перевел: Сергей Фастунов
Урок создан: 12 Августа 2011
Просмотров: 451197
Правила перепечатки

5 последних уроков рубрики "Разное"

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Быстрая заметка: массовый UPDATE в MySQL

Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.