Руководство по работе с JSON в JavaScript

Введение

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

В этом руководстве мы рассмотрим, как вы можете использовать JSON в своих программах на JavaScript. Если у вас есть опыт программирования на JavaScript, это должно показаться вам простым.

Что такое JSON?

JSON расшифровывается как JavaScript Object Notation. Это формат, разработанный для обеспечения обмена различными типами данных. JSON в основном использует JavaScript в качестве основного языка программирования. Он также работает с другими языками, такими как Python, PHP, Ruby, а также Java. Он легко читается, чрезвычайно легковесен и не требует сложного форматирования. Вы можете ознакомиться с общим синтаксисом и структурой формата’ следуя нашему руководству: Обзор формата обмена данными JSON.

JSON может использоваться сам по себе или быть определен в другом формате файлов. Когда он используется сам по себе, он имеет расширение .json. В другом формате он представляется либо в виде строки JSON в кавычках, либо в виде объекта, присвоенного переменной. Например, JSON также может использоваться в формате .html. Этот формат позволяет относительно легко осуществлять передачу данных между сервером и браузером.

Формат JSON является текстовым. Данные в формате «ключ-значение» записываются в фигурных скобках. Вот как выглядит типичный файл .json выглядит следующим образом:

Если у вас есть объект JSON в файле .js или .html, он будет выглядеть как переменная следующим образом:

В некоторых случаях вы можете увидеть их все в одной строке. Это происходит, когда JSON отображается в виде строки, а не объекта в файле JavaScript:

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

Сравнение JSON и объекта JavaScript

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

В следующем примере мы показываем вариант пользователя на JavaScript. Пользователь — Sammy Shark, и он сейчас в сети:

Как видите, вокруг ключей нет кавычек, таких как first_name, last_name, online, или full_name. Также в последней строке находится значение функции. Если вы хотите получить доступ к данным в виде строки, вы можете вызвать user.first_name с помощью точечной нотации. Если вместо этого вам нужно полное имя, вы будете использовать user.full_name(), так как это функция.

Как получить доступ к данным JSON

Как мы уже упоминали в предыдущем разделе, вы можете получить доступ к данным JSON в JavaScript с помощью точечной нотации. Давайте’ возьмем в качестве примера объект JSON с именем sammy:

Наша точечная нотация для доступа к значениям будет выглядеть так:

Сначала идет переменная. После этого мы ставим точку. Наконец, мы указываем ключ, к которому хотим получить доступ.

Предположим, мы хотим создать в JavaScript оповещение, которое показывает значение ключа first_name. Чтобы оно появилось во всплывающем окне, мы будем использовать функцию JavaScript alert() следующим образом:

Другой способ получить доступ к данным из JSON — использовать синтаксис квадратных скобок. Ключ должен быть помещен в двойные кавычки внутри квадратных скобок. Вот продолжение предыдущего примера:

Что делать, если вы работаете с элементами вложенного массива? В этом случае вам нужно вызвать номер элемента в массиве. Рассмотрим следующий пример:

Допустим, мы хотим получить доступ к строке facebook. Вот как мы будем использовать точечную нотацию для доступа к этому элементу в массиве по его номеру:

Не забывайте добавлять дополнительную точку для каждого вложенного элемента.

Функции, используемые с JSON

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

• JSON.stringify()

Строки лучше использовать, когда вы пытаетесь передать данные в облегченном формате. Вот почему они используются для хранения и передачи данных от клиента к серверу. Рассмотрим следующий пример. Допустим, вы собираете данные о настройках пользователя на одном компьютере. Вам нужно отправить эту информацию на ваш сервер. Для этой цели вы будете использовать строку. Затем вы сможете преобразовать ее обратно с помощью JSON.parse(), чтобы прочитать ее и работать с ней.

Функция, которую мы выделим здесь, — это JSON.stringify(). Эта функция преобразует объект JSON в строку JSON. В этом примере мы присвоим наш объект переменной obj. Мы преобразуем его с помощью функции JSON.stringify(). Для этого мы передадим obj в функцию, а затем присвоим строку переменной s следующим образом:

Вызов переменной s вернет вам JSON в виде строки:

• JSON.parse()

Разумеется, JSON.parse() выполняет противоположную функцию. После завершения передачи данных вам необходимо преобразовать их обратно в объект JSON, чтобы вы могли работать с ними. Один из вариантов — использовать функцию eval(). Однако этот подход не слишком безопасен. Вот почему мы предпочитаем использовать функцию JSON.parse().

Рассмотрим предыдущий пример еще раз. Мы передадим строку s в функцию JSON.parse(). Затем мы присвоим результат новой переменной:

Наш новый объект теперь — o. Он будет таким же, как obj. Больше ясности появится, если мы рассмотрим использование JSON.parse() в HTML-файле следующим образом:

Здесь вы можете увидеть, как мы преобразовали строку s в извлекаемый объект. Таким образом, JSON.parse() является безопасным вариантом для преобразования строк JSON в объекты.

Заключение

Как мы увидели в этом руководстве, JSON имеет множество применений в JavaScript. Он особенно полезен, поскольку его можно использовать практически с любым языком программирования, что делает его естественным выбором. Более того, мы лишь слегка коснулись этой темы. С JSON можно сделать гораздо больше. Он уже поддерживается в API.

Вот дополнительные ресурсы из нашего блога, которые помогут вам в программировании на JavaScript:

• Узнайте, как работают прототипы и наследование в JavaScript.
• Подробно изучите, как добавить JavaScript в HTML.
• Если вы создаете собственное веб-приложение, ознакомьтесь с нашим руководством по выбору оптимальной конфигурации сервера.

Приятной работы!