Использование JSON в JavaScript

Published by Leave your thoughts

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: ,

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>