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

Вступление

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

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

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

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

Формат JSON

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

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

Когда вы работаете с .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 пользователя Sammy Shark, который в настоящее время находится в сети.

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

Это будет выглядеть очень знакомо вам как объект JSON, но нет никаких кавычек вокруг любой из клавиша ( first_namelast_nameonline, или 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во всплывающем окне , мы можем сделать это, вызвав alert()функцию JavaScript :

alert(sammy.first_name);
Output
Sammy

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

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

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

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