JavaScript - JSON

Урок, в котором рассматривается, что такое 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 - Перебор элементов массива



   JavaScript и jQuery 0    3427 0

Комментарии (3)

  1. Mavio Candiz # 0
    Здравствуйте!
    По поводу метода JSON.stringify() мне не совсем понятно, откуда он взялся. Я просмотрел всю библиотеку jQuery, jquery.min, которые содержат JSON, но нашёл только JSON.parse(). Подскажите, пожалуйста, где ещё есть json, чтобы мне знать, какую библиотеку нужно подключать для полноценной работы объекта JSON.
    1. Александр Мальцев # 0
      Здравствуйте.
      В этой статье приведены только нативные методы JavaScript. Для работы с ними никакие библиотеки подключать не надо, в том числе и jQuery.
      1. Mavio Candiz # 0
        Благодарю! Значит JSON — это встроенное средство языка JavaScript.
        Для меня, как изучающего JavaScript и пробующего писать на нём интересные программы, это очень ценная информация.

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