TOC

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

Вступление

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

Чтобы узнать больше о JSON в общих чертах, прочитайте учебник «https://www.digitalocean.com/community/tutorials/an-introduction-to-json[An Введение в JSON]».

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

  • Хранение данных

  • Генерация структур данных из пользовательского ввода

  • Передача данных с сервера на клиент, с клиента на сервер и с сервера на сервер

  • Конфигурирование и проверка данных

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

JSON формат

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

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

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

sammy.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 пользователя веб-сайта Сэмми Шарк, который в данный момент находится в сети.

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 выше, мы могли бы использовать https://www.digitalocean.com/community/tutorials/how-to-work-with-json-in-javascript#accessing-json-data [ точечная нотация] для вызова + 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);
OutputSammy

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

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

alert(sammy["online"]);
Outputtrue

Когда вы работаете с элементами массива nested, вам следует вызывать номер элемента в вашем массиве. Давайте рассмотрим 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);
Outputfacebook

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

Использование точечной нотации или синтаксиса в квадратных скобках позволяет нам получить доступ к данным, содержащимся в формате 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 на стороне клиента и / или сервера. Хотя вы можете конвертировать текст в объект с помощью функции + eval () +, он не очень безопасен, поэтому вместо него мы будем использовать функцию + JSON.parse () +.

Чтобы преобразовать пример в https://www.digitalocean.com/community/tutorials/how-to-work-with-json-in-javascript/#functions-for-working-with-json [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>
OutputName: Sammy Shark
Location: Ocean

В контексте HTML-файла мы можем увидеть, как строка JSON + s + преобразуется в объект, который можно получить при окончательном отображении страницы с помощью https://www.digitalocean.com/community/tutorials/how. -to-work-with-json-in-javascript # accessing-json-data [доступ к JSON] через точечную запись.

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

Заключение

JSON является естественным форматом для использования в JavaScript и имеет много реализаций, доступных для использования во многих популярных языках программирования. Если вы хотите использовать формат на другом языке программирования, вы можете увидеть полную языковую поддержку на сайте «http://www.json.org/[Introduction JSON]».

Поскольку он является легковесным и легко переносится между языками программирования и системами, в JSON наблюдается повышенная поддержка API, включая https://www.digitalocean.com/community/tutorials/how-to-create-a-twitter-app. [Twitter API].

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

Related