Использование JSON в JavaScript
JSON (JavaScript Object Notation) – это формат передачи данных. Из названия видно, что формат основан на языке программирования JavaScript, однако он доступен и в других языках (Python, Ruby, PHP, Java).
Читайте также: Основы работы с JSON
В программах JavaScript формат JSON обычно используется в следующих случаях:
- Хранение данных.
- Генерирование структур данных из пользовательского ввода.
- Обмен данными между сервером и клиентом.
- Настройка и проверка данных.
Это руководство познакомит вас с основами использования формата JSON в JavaScript.
Примечание: Руководство предполагает, что вы имеете базовые навыки работы с JavaScript.
Формат JSON
JSON основан на синтаксисе объектов JavaScript. Данные записываются в виде пар «ключ-значение» и помещаются в фигурные скобки.
При работе с JSON все объекты хранятся в файле .json, но также они могут существовать как отдельные объекты в контексте программы.
Читайте также: Основы работы с JSON
Файл .json выглядит так:
{
"first_name" : "John",
"last_name" : "Smith",
"online" : true
}
Объект JSON в файлах .js или .html выглядит так:
var john = {
"first_name" : "John",
"last_name" : "Smith",
"online" : true
}
Иногда JSON записывается в виде строки в контексте файла или сценария программы JavaScript.
var john = '{"first_name" : "John", "last_name" : "Smith", "location" : "London"}';
Преобразование объекта JSON в строку используется для быстрой передачи данных.
Объекты JSON и JavaScript
Формат JSON разрабатывался для использования во всех языках программирования, а объекты JavaScript могут работать только в JavaScript.
Объекты JavaScript и JSON имеют похожий синтаксис. Однако в JavaScript ключи не представлены строками в кавычках. Также значения объектов JavaScript менее ограничены, чем в JSON, и могут выражаться функциями.
Объект JavaScript выглядит так:
var user = {
first_name: "John",
last_name : "Smith",
online : true,
full_name : function() {
return this.first_name + " " + this.last_name;
}
};
Как видите, в этом объекте не используются кавычки в ключах (first_name, last_name, online, full_name). Также в нём есть функция (последняя строка).
Чтобы получить доступ к данным JavaScript, нужно вызвать user.first_name с помощью точечной нотации. Это вернёт строку. Чтобы получить полное имя, нужно вызвать функцию user.full_name().
Объекты JavaScript существуют только в пределах языка JavaScript. Если ваши данные должны быть доступны и для других языков программирования, лучше использовать JSON.
Доступ к данным JSON
Данные JSON доступны в Javascript посредством точечной нотации. Чтобы понять, как это работает, рассмотрим такой пример объекта JSON:
var john = {
"first_name" : "John",
"last_name" : "Smith",
"online" : true
}
Чтобы получить доступ к значениям, нужно использовать точечную нотацию:
john.first_name
john.last_name
john.online
Переменная john указывается в начале, затем идёт точка и ключ, значение которого нужно извлечь.
Чтобы создать всплывающее предупреждение JavaScript, которое будет извлекать значение ключа first_name, используйте функцию alert():
alert(john.first_name);
John
Также для доступа к данным можно использовать квадратные скобки. При этом ключ нужно взять в кавычки. Попробуйте использовать это в функции alert():
alert(john["online"]);
true
При работе с вложенными массивами нужно вызывать элемент массива по номеру. Предположим, у нас есть такой массив:
var user_profile = {
"username" : "JohnSmith",
"social_media" : [
{
"description" : "twitter",
"link" : "https://twitter.com/johnsmith"
},
{
"description" : "facebook",
"link" : "https://www.facebook.com/JohnSmith"
},
{
"description" : "github",
"link" : "https://github.com/johnsmith"
}
]
}
Чтобы отобразить строку, которая содержит ссылку на facebook, нужно вызвать элемент массива в контексте точечной нотации:
alert(user_profile.social_media[1].description);
facebook
Обратите внимание: для каждого вложенного элемента используется дополнительная точка.
Функции в JSON
При работе с JSON очень полезно иметь возможность быстро преобразовать строку в объект и наоборот. В этом разделе мы рассмотрим два метода JSON.
Функция JSON.stringify()
Функция JSON.stringify() преобразовывает объекты JSON в строки.
Строки позволяют упростить обмен данными между сервером и клиентом. К примеру, вы можете собирать настройки пользователей на стороне клиента, а затем передавать их на сервер. После этого вы сможете преобразовать строку в объект с помощью метода JSON.parse().
Рассмотрим объект, присвоенный переменной obj. Попробуйте преобразовать его в строку. Для этого нужно передать функции JSON.stringify() переменную obj. Присвойте эту строку переменной s.
var obj = {"first_name" : "John", "last_name" : "Smith", "location" : "London"}
var s = JSON.stringify(obj)
Теперь объект стал строкой и является значением переменной s:
'{"first_name" : "John", "last_name" : "Smith", "location" : "London"}'
Функция JSON.parse()
Строки удобны при обмене данными, но потом их нужно снова преобразовать в объекты. Для этого используется функция JSON.parse().
Примечание: Чтобы преобразовать текст в объект, используйте функцию eval().
Теперь попробуйте преобразовать значение функции s в объект и присвоить его новой переменной:
var o = JSON.parse(s)
Теперь у вас есть объект o, идентичный объекту obj.
Рассмотрим ещё один пример. Функцию JSON.parse() можно использовать в контексте файла HTML:
<!DOCTYPE html>
<html>
<body>
<pid="user"></p>
<script>
var s = '{"first_name" : "John", "last_name" : "Smith", "location" : "London"}';
var obj = JSON.parse(s);
document.getElementById("user").innerHTML =
"Name: " + obj.first_name + " " + obj.last_name + "<br>" +
"Location: " + obj.location;
</script>
</body>
</html>
Name: John Smith
Location: London
В HTML-файле JSON-строка s преобразовывается в объект, который извлекается в финальный рендеринг с помощью точечной нотации.
Заключение
JSON обычно используется в JavaScript, однако этот формат широко применяется в других языках программирования.
Больше информации о совместимости и обработке JSON можно найти на сайте проекта.
Сегодня JSON часто используется в API.
Читайте также:
Писать JSON с нуля приходится редко. Обычно данные загружаются из исходников или преобразовываются в JSON. Потому знать, как использовать JSON в программе важнее, чем уметь писать такие файлы.
Tags: Javascript, JSON