Урок, в котором рассматривается, что такое JSON и какие он имеет преимущества по сравнению с другими форматами данных.

Понятие JSON

JSON (JavaScript Object Notation) - это текстовый формат представления данных в нотации объекта JavaScript.

JavaScript – Что такое JSON

Это означает то, что данные в JSON организованы, так же как и в объекте JavaScript. Но в отличие от последнего формат записи JSON имеет некоторые особенности, которые будут рассмотрены немного позже.

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

Структура формата JSON

Кто знаком с процессом создания объектов в JavaScript, не увидит ни чего нового в структуре формата JSON. Это связано с тем, что структура JSON соответствует структуре объекта JavaScript с некоторыми ограничениями.

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

Структура JSON

При этом значение напрямую связано с ключом и образуют так называемую пару ключ-значение. Для того чтобы получить значение в таком объекте, необходимо знать его ключ. Синтаксически такие данные в JSON записываются следующим образом:

JSON - пара ключ-значение

В вышеприведенной записи видно, что ключ отделяется от значения с помощью знака двоеточия (:). При этом ключ в объекте JSON обязательно должен быть заключен в двойные кавычки. Это первая особенность JSON, которая его отличает от объекта JavaScript. Т.к. в объекте JavaScript ключ (свойство объекта) не обязательно должен быть заключён в двойные кавычки.

Например, структура объекта, которая является валидной с точки зрения JavaScript и не валидной с точки зрения JSON:

var person = {
  name : "Иван";
} // объект JavaScript
Предупреждение: имя ключу старайтесь задавать так чтобы не усложнить доступ к данным, т.е. при составлении имени предпочтительно придерживаться верблюжьей нотации или использовать для соединения слов знак нижнего подчёркивания ("_").

Значение ключа в JSON может быть записано в одном из следующих форматов: string (строкой), number (числом), object (объектом), array (массивом), boolean (логическим значением true или false), null (специальным значением JavaScript).

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

var person = {
  "name" : "Иван";
  "setName": function() {
    console.log(this.name);
  }
} // объект JavaScript

Для отделения одного элемента (пары ключ-значение) от другого используется знак запятая (,).

Например, рассмотрим JSON, состоящий из различных типов данных.

JSON, состоящий из различных типов данных

Внимание: формат представления данных JSON не допускает использование внутри своей структуры комментариев.

Работа с JSON в JavaScript

В отличие от объекта JavaScript JSON представляет собой строку.

Например:

// например переменная personData, содержит строку, которая представляет из себя JSON
var personData = '{"name":"Иван","age":37,"mother":{"name":"Ольга","age":58},"children":["Маша","Игорь","Таня"],"married": true,"dog": null}';

Работа с JSON обычно ведётся в двух направлениях:

  1. Парсинг - это перевод строки, содержащей JSON, в объект JavaScript.
  2. Конвертирование объекта JavaScript в строку JSON. Другими словами, это действие выполняет преобразование обратное парсингу.

Парсинг JSON

Парсинг JSON, т.е. перевод строки JSON в объект JavaScript, осуществляется с помощью метода eval() или parse().

Использование метода eval():

// переменная person - это объект JavaScript, который получен путём выполнения кода (строки) JSON
var person= eval('('+personData+')');
Внимание: Метод eval() не рекомендуется использовать из-за проблем с безопасностью, которые связаны с тем, что кто-то теоретически может добавить скрипт в строку JSON и он выполнится. В методе JSON.parse() такой уязвимости нет.

Использование метода JSON.parse():

// переменная person - это объект JavaScript, который получен путём парсинга строки JSON
var person = JSON.parse(personData);

Конвертирование объекта JavaScript в строку JSON

Перевод объекта JavaScript в строку JSON осуществляется с помощью метода JSON.stringify(). Данный метод осуществляет действие обратное методу JSON.parse().

var personString = JSON.strigify(person);

Преимущества формата JSON

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

  • удобные и быстрые в работе методы, предназначенные для конвертации (парсинга) строки JSON в объект JavaScript и обратно;
  • понятная и простая структура данных;
  • очень маленький размер по сравнению с другими форматами данных (например XML). Это связано с тем, что формат JSON содержит минимальное возможное форматирование, т.е. при его написании используется всего несколько специальных знаков. Это очень важное преимущество, т.к. данные представленные в формате JSON будут быстрее загружаться, чем, если бы они были бы представлены в других форматах.

Из-за того что данный формат имеет очень много преимуществ он стал применяться не только в JavaScript, но и во многих других языках, таких как C, Ruby, Perl, Python, PHP и т.д.

Сравнение форматов JSON и XML

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

  1. При передаче некоторых данных размер JSON будет значительно меньше, чем размер XML.
  2. JSON имеет более удобные методы конвертации в структуры данных JavaScript, чем XML.
  3. JSON более просто создавать, чем XML.

Формат JSON против XML

Работа с данными JSON после парсинга

Работа с данными JSON после парсинга осуществляется как с объектом JavaScript.

//JSON
var personData = '{"name":"Иван","age":37,"mother":{"name":"Ольга","age":58},"children":["Маша","Игорь","Таня"],"married": true,"dog": null}';
//Объект JavaScript person
var person = JSON.parse(personData);

Рассмотрим основные моменты:

//получить значения ключа (свойства) name
person.name;
person["name"];
//получить значения ключа (свойства) name, находящегося в объекте mother
person.mother.name;
//удалить элемент age
delete(person.age)
//добавить (или обновить) ключ (свойство)
person.eye = "карие";
//при работе с массивами необходимо использовать методы, предназначенные для работы именно с массивами
//удалить 1 элементиз массива (метод splice)
person.children.splice(1,1)
//добавить элемент в массив (метод push)
person.children.push("Катя");

Работа с данными JSON после парсинга

Для перебора элементов в объекте можно использовать цикл for..in:

for (key in person) {
  if (person.hasOwnProperty(key)) {
    //ключ = key
    //значение = person[key]
    console.log("Ключ = " + key);
    console.log("Значение = " + person[key]);
  } // если объект person имеет key (если у person есть свойство key)
} // перерабрать все ключи (свойства) в объекте

JavaScript - Перебор элементов в объекте

Для перебора элементов массива можно использовать следующий цикл:

for (var i=0; i<=person.children.length-1; i++) {
 // if (person.children[i].hasOwnProperty(key)) {
    //i = индекс
    //значение = person.children[i]
    console.log("Элемент [ "+ i +" ] = " + person.children[i]);  
 // }

JavaScript - Перебор элементов массива