JSON означает JavaScript Object Notation. JSON — это чрезвычайно легкий формат обмена данными между сервером и клиентом, который можно быстро и легко анализировать и генерировать.

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

  • Объект: он определяется как неупорядоченная коллекция пар ключ / значение (key:value). Каждый объект начинается с левой фигурной скобки { и заканчивается правой фигурной скобкой }. Несколько пар ключ / значение разделяются запятой ,.
  • Массив: он определяется как упорядоченный список значений. Массив начинается с левой скобки [ и заканчивается правой скобкой ]. Значения разделяются запятой ,.

В JSON имена свойств или ключи всегда являются строками, а значение может быть string, number, true или false, null и даже object или array. Строки должны быть заключены в двойные кавычки " и могут содержать управляющие символы, такие как \n, \t и \. Объект JSON может выглядеть следующим образом:

{
    "book": {
        "name": "Harry Potter and the Goblet of Fire",
        "author": "J. K. Rowling",
        "year": 2000,
        "genre": "Fantasy Fiction",
        "bestseller": true
    }
}

Пример массива JSON будет выглядеть примерно так:

{
    "fruits": [
        "Apple",
        "Banana",
        "Strawberry",
        "Mango"
    ]
}

JSON — это самый популярный и легкий текстовый формат обмена данными между различными платформами и операционными системами.

Разбор данных JSON в JavaScript

В JavaScript вы можете легко анализировать данные JSON, полученные с веб-сервера, используя метод JSON.parse(). Этот метод анализирует строку JSON и создает значение JavaScript или объект, описываемый строкой. Если данная строка не является допустимой JSON, вы получите синтаксическую ошибку.

Предположим, мы получили следующую JSON-кодированную строку с веб-сервера:

{"name": "Peter", "age": 22, "country": "United States"}

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

// Получаем данные JSON в переменную
var json = '{"name": "Peter", "age": 22, "country": "United States"}';

// Преобразуем JSON в объект JS
var obj = JSON.parse(json);

// Доступ к индивидуальному значению из объекта JS
alert(obj.name); // Вывод: Peter
alert(obj.age); // Вывод: 22
alert(obj.country); // Вывод: United States

Пожалуйста, ознакомьтесь с руководством по синтаксическому анализу PHP JSON, чтобы узнать, как в ответ возвращать данные JSON с веб-сервера, а также как кодировать / декодировать данные JSON на стороне сервера с использованием PHP.

Разбор вложенных данных JSON в JavaScript

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

/* Хранение многострочной строки JSON в переменной JS
используя новые литералы шаблона ES6 */
var json = `{
    "book": {
        "name": "Harry Potter and the Goblet of Fire",
        "author": "J. K. Rowling",
        "year": 2000,
        "characters": ["Harry Potter", "Hermione Granger", "Ron Weasley"],
        "genre": "Fantasy Fiction",
        "price": {
            "paperback": "$10.40", "hardcover": "$20.32", "kindle": "$4.11"
        }
    }
}`;

// Преобразование объекта JSON в объект JS
var obj = JSON.parse(json);

// Рекурсивная функция для печати вложенных значений
function printValues(obj) {
    for(var k in obj) {
        if(obj[k] instanceof Object) {
            printValues(obj[k]);
        } else {
            document.write(obj[k] + "<br>");
        };
    }
};

// Печать всех значений из результирующего объекта
printValues(obj);

document.write("<hr>");

// Печать одного значения
document.write(obj["book"]["author"] + "<br>");  // Выводит: J. K. Rowling
document.write(obj["book"]["characters"][0] + "<br>");  // Выводит: Harry Potter
document.write(obj["book"]["price"]["hardcover"]);  // Выводит: $20.32

Кодирование данных как JSON в JavaScript

Иногда объект JavaScript или значение из вашего кода необходимо передавать на сервер во время Ajax. JavaScript предоставляет для этой цели метод JSON.stringify(), который преобразует значение JavaScript в строку JSON, как показано ниже:

Stringify-объект JavaScript

В следующем примере показано, как преобразовать объект JavaScript в строку JSON:

// Образец объекта JS
var obj = {"name": "Peter", "age": 22, "country": "United States"};

// Преобразование объекта JS в строку JSON
var json = JSON.stringify(obj);
alert(json);

Хотя объекты JavaScript и JSON выглядят очень похоже, но они не совсем одинаковы. Например, в JavaScript имена свойств объекта могут быть заключены в одинарные кавычки ('...'), двойные кавычки ("...") или же вы можете вообще опустить кавычки. Но в JSON все имена свойств должны быть заключены в двойные кавычки.

Stringify-массив JavaScript

Точно так же вы можете конвертировать массивы JavaScript в строки JSON, например:

// Образец массива JS
var arr = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

// Преобразование массива JS в строку JSON
var json = JSON.stringify(arr);
alert(json);

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

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

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

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.