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 в ваше приложение.