Руководство по парсингу JSON в JavaScript

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 в 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);

Stringify-массив JavaScript

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

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

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