Поиск по сайту:

Как работать с JSON в JavaScript

Введение

Поскольку JSON является производным от языка программирования JavaScript, это естественный выбор для использования в качестве формата данных в JavaScript. JSON, сокращение от JavaScript Object Notation, обычно произносится как имя «Джейсон».

Чтобы узнать больше о JSON в общих чертах, прочитайте учебник «Введение в JSON».

Чтобы начать думать о том, где вы можете использовать JSON в своих программах JavaScript, некоторые общие варианты использования JSON включают:

  • Хранение данных
  • Создание структур данных на основе пользовательского ввода
  • Передача данных с сервера на клиент, с клиента на сервер и с сервера на сервер
  • Настройка и проверка данных

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

Формат JSON

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

При работе с JSON вы, скорее всего, увидите объекты JSON в файле .json, но они также могут существовать как объект JSON или строка в контексте программы. Подробнее о синтаксисе и структуре читайте здесь.

Когда вы работаете с файлом .json, он будет выглядеть так:

{ 
  "first_name"  :  "Sammy", 
  "last_name"   :  "Shark", 
  "online"      :  true 
}

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

var sammy = { 
  "first_name"  :  "Sammy", 
  "last_name"   :  "Shark", 
  "online"      :  true 
}

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

var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

Преобразование объектов JSON в строки может быть особенно полезно для быстрой передачи данных.

Мы рассмотрели общий формат JSON и то, как вы можете увидеть его в виде файла .json или в JavaScript в виде объекта или строки.

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

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

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

Давайте рассмотрим пример объекта JavaScript пользователя веб-сайта Sammy Shark, который в данный момент находится в сети.

var user = {
    first_name: "Sammy",
    last_name : "Shark",
    online    : true,
    full_name : function() {
       return this.first_name + " " + this.last_name;
    }
};

Это будет выглядеть очень знакомо вам как объект JSON, но вокруг ключей (first_name, last_name, online, кавычек) нет кавычек. или full_name), а в последней строке есть значение функции.

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

Объекты JavaScript могут существовать только в языке JavaScript, поэтому, когда вы работаете с данными, доступ к которым должен осуществляться на разных языках, лучше всего выбрать JSON.

Доступ к данным JSON

Доступ к данным JSON обычно осуществляется в Javascript через запись через точку. Чтобы понять, как это работает, давайте рассмотрим объект JSON sammy:

var sammy = { 
  "first_name"  :  "Sammy", 
  "last_name"   :  "Shark", 
  "online"      :  true 
}

Чтобы получить доступ к любому из значений, мы будем использовать запись через точку, которая выглядит следующим образом:

sammy.first_name
sammy.last_name
sammy.online

Сначала идет переменная sammy, за ней точка, за которой следует ключ, к которому нужно получить доступ.

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

alert(sammy.first_name);

Output
Sammy

Здесь мы успешно вызвали значение, связанное с ключом first_name, из объекта JSON sammy.

Мы также можем использовать синтаксис квадратных скобок для доступа к данным из JSON. Для этого мы будем держать ключ в двойных кавычках в квадратных скобках. Для нашей переменной sammy выше использование синтаксиса квадратных скобок в функции alert() выглядит следующим образом:

alert(sammy["online"]);

Output
true

Когда вы работаете с вложенными элементами массива, вы должны вызывать номер элемента в вашем массиве. Давайте рассмотрим JSON ниже:

var user_profile = { 
  "username" : "SammyShark",
  "social_media" : [
    {
      "description" : "twitter",
      "link" : "https://twitter.com/digitalocean"
    },
    {
      "description" : "facebook",
      "link" : "https://www.facebook.com/DigitalOceanCloudHosting"
    },
    {
      "description" : "github",
      "link" : "https://github.com/digitalocean"
    }
  ]
}

Чтобы получить доступ к строке facebook, мы можем вызвать этот элемент в массиве в контексте записи через точку:

alert(user_profile.social_media[1].description);

Output
facebook

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

Использование точечной нотации или синтаксиса квадратных скобок позволяет нам получить доступ к данным, содержащимся в формате JSON.

Функции для работы с JSON

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

JSON.stringify()

Функция JSON.stringify() преобразует объект в строку JSON.

Строки полезны для передачи данных от клиента к серверу путем хранения или передачи информации упрощенным способом. Например, вы можете собрать настройки пользователя на стороне клиента, а затем отправить их на сервер. Позже вы можете прочитать информацию с помощью метода JSON.parse() и работать с данными по мере необходимости.

Мы рассмотрим объект JSON, который мы назначаем переменной obj, а затем преобразуем его с помощью JSON.stringify(), передав obj в функцию. Мы можем присвоить эту строку переменной s:

var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}

var s = JSON.stringify(obj)

Теперь, если мы будем работать с s, JSON будет доступен нам в виде строки, а не объекта.

'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'

Функция JSON.stringify() позволяет нам преобразовывать объекты в строки. Чтобы сделать обратное, мы рассмотрим функцию JSON.parse().

JSON.parse()

Строки полезны для транспортировки, но вы захотите иметь возможность конвертировать их обратно в объект JSON на стороне клиента и/или на стороне сервера. Мы можем сделать это с помощью функции JSON.parse().

Чтобы преобразовать пример из раздела JSON.stringify() выше, мы должны передать строку s в функцию и назначить ее новой переменной:

var o = JSON.parse(s)

Затем у нас будет объект o для работы, который будет идентичен объекту obj.

Чтобы глубже разобраться, давайте рассмотрим пример JSON.parse() в контексте HTML-файла:

<!DOCTYPE html>
<html>
<body>

<p id="user"></p>

<script>
var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

var obj = JSON.parse(s);

document.getElementById("user").innerHTML =
"Name: " + obj.first_name + " " + obj.last_name + "<br>" +
"Location: " + obj.location;
</script>

</body>
</html>

Output
Name: Sammy Shark
Location: Ocean

В контексте HTML-файла мы можем увидеть, как строка JSON s преобразуется в объект, который можно получить при окончательном отображении страницы путем доступа к JSON через точечную запись.

JSON.parse() — это безопасная функция для анализа строк JSON и преобразования их в объекты.

Заключение

JSON является естественным форматом для использования в JavaScript и имеет множество реализаций, доступных для использования во многих популярных языках программирования. Если вы хотите использовать этот формат на другом языке программирования, вы можете увидеть полную языковую поддержку на сайте «Знакомство с JSON».

Поскольку он легкий и легко переносится между языками программирования и системами, JSON получает расширенную поддержку в API, включая API Twitter.

Скорее всего, вы не будете создавать свои собственные файлы .json, а будете получать их из других источников. Вы можете ознакомиться с этими ресурсами, чтобы узнать о преобразовании других структур данных в JSON.