Учебное пособие по JSON - Узнайте, как использовать JSON с JavaScript

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

JSON - одна из важнейших концепций, которую вы можете изучить как программист или QA.

На протяжении всей карьеры программиста вы будете использовать JSON постоянно, будь то создание API, использование API или создание файлов конфигурации для вашего приложения.

Что такое JSON

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

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

Пример JSON:



#user.json {
'name': 'Steve',
'age': 43,
'isProgrammer' true,
'hobbies': ['Reading Java books', 'cooking', 'classic music'],
'friends': [{
'name': 'joey',
'age': 39,
'isProgrammer': false,
'friends': [...]
}] }

Зачем использовать JSON

Мы используем JSON, потому что его очень легко отправлять в HTTP-запросах и ответах из-за небольшого размера файла.

Его легче читать по сравнению с чем-то вроде XML, поскольку он намного чище, и здесь не так много открывающих и закрывающих тегов, о которых нужно беспокоиться.

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

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

Это упрощает работу с данными JSON внутри языка программирования.

Типы данных JSON

Теперь, когда мы понимаем, что такое JSON и почему он важен, давайте погрузимся в некоторый задействованный синтаксис и типы данных, которые может представлять JSON.

Как мы знаем, JSON - это формат представления данных, поэтому нам нужно иметь возможность представлять в нем определенные типы данных.

JSON изначально поддерживает:

  • струны
  • числа числа могут быть в любом формате, будь то десятичные числа целые числа отрицательные числа даже числа в экспоненциальной записи
  • булевы что может быть истинным или ложным
  • ноль что по сути ничего не значит
  • Массивы который может быть списком любого из вышеперечисленных типов
  • Объекты объект - самый сложный, но наиболее используемый тип в json, поскольку он позволяет вам представлять данные, которые являются парами ключ-значение

Пример JSON

Давайте рассмотрим пример использования json внутри файла.

Первое, что вам нужно сделать, это создать файл с .json расширение в конце.

Мы собираемся создать user.json файл с пользовательским объектом, представленным как JSON.

Для создания объекта нам нужно использовать открывающую и закрывающую фигурные скобки {} а затем внутри него мы поместим все пары ключ-значение, составляющие наш объект.

Каждое отдельное свойство внутри JSON представляет собой пару «ключ-значение». Ключ должен быть окружен двойным '' кавычки, за которыми следует двоеточие : а затем значение для этого ключа.

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

Пример файла JSON

#user.json {
'name': 'Steve',
'age': 43,
'isProgrammer' true,
'hobbies': ['Reading Java books', 'cooking', 'classic music'],
'friends': [{
'name': 'joey',
'age': 39,
'isProgrammer': false,
'friends': [...]
}] }

В приведенном выше примере у нас есть файл с именем user.json. Внутри файла у нас есть разные типы данных.

Ключи всегда заключаются в двойные кавычки. Для значений только строковый тип заключен в двойные кавычки.

В примере:

  • имя string
  • возраст integer
  • isProgrammer - это boolean
  • хобби - это Array
  • друзья - это Array of Objects
Примечание:В конце последнего свойства файла JSON или объекта JSON нет запятой.

Как использовать строку JSON внутри JavaScript

Предположим, у нас есть файл JSON с именем companies.json который представляет собой массив объектов компании:

[
{
'name': 'Big corporate',
'numberOfEmployees': 1000,
'ceo': 'Neil',
'rating': 3.6
},
{
'name': 'Small startup',
'numberOfEmployees': 10,
'ceo': null,
'rating': 4.3
} ]

В приведенном выше примере у нас есть два объекта компании внутри массива JSON.

Теперь давайте посмотрим, как мы можем использовать указанный выше JSON внутри JavaScript.

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

Наш html файл выглядит так:


JSON Example

let companies =
`[
{

'name': 'Big corporate',

'numberOfEmployees': 1000,

'ceo': 'Neil',

'rating': 3.6
},
{

'name': 'Small startup',

'numberOfEmployees': 10,

'ceo': null,

'rating': 4.3
}
]`
console.log(JSON.parse(companies))

Когда мы проверяем журнал консоли в Chrome Developer Tools, результат такой же, как показано ниже:

Пример JSON javascript

Затем мы можем проанализировать указанный выше JSON, указав, что мы хотим извлечь. Например, если бы мы хотели получить название первой компании в массиве, мы бы использовали:

console.log(JSON.parse(
companies[0].name )) Output: Big corporate

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

console.log(JSON.parse(
companies[1].rating )) Output: 4.3

Как преобразовать объект JavaScript в JSON

Теперь предположим, что у нас есть объект JavaScript, подобный показанному ниже:


JSON Example

var person = {
name: 'Brad',
age: 35
}

Чтобы преобразовать объект JavaScript человека в JSON, мы используем stringify метод:

jsonPerson = JSON.stringify(person);

Результатом является действительный JSON:

{
'name': 'Brad',
'age': 35 }
Примечание:console.log(jsonPerson.name) отпечатки неопределенный . Чтобы получить значение, мы должны преобразовать JSON обратно в объект JavaScript.

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

Как преобразовать объект JSON в JavaScript

Чтобы преобразовать указанный выше объект JSON обратно в JavaScript, мы используем parse метод:

jsPerson = JSON.parse(jsonPerson) Примечание:Если бы мы попробовали console.log(jsPerson.name) мы получаем 'Брэд'.

Полный пример


JSON Example

var person = {
name: 'Brad',
age: 35
}
jsonPerson = JSON.stringify(person); //convert to JSON
console.log(jsonPerson.name); //undefined
jsPerson = JSON.parse(jsonPerson); //convert to JS Object
console.log(jsPerson.name); //Brad

Резюме

  • JSON расшифровывается как JavaScript Object Notation.
  • Легкий формат обмена данными
  • На основе подмножества JavaScript
  • Легко читать и писать
  • Независимый от языка
  • Может быть проанализирован на большинстве современных языков программирования

Типы данных:

  • Число: Нет разницы между integer и float
  • Нить: Строка символов Юникода. Используйте двойные кавычки
  • Логическое: Правда или ложь
  • Множество: Упорядоченный список из 0 или более значений в []
  • Объект: Неупорядоченный набор пар ключ / значение
  • Ноль: Пустое значение

Правила синтаксиса JSON:

  • Использует пары ключ / значение - например, {'name': 'value'}
  • Использует двойные кавычки вокруг КЛЮЧ
  • Необходимо использовать указанные типы данных
  • Тип файла .json.
  • Тип MIME - «Приложение / json».

Надеюсь, вы нашли этот учебник JSON с Javascript полезным. Теперь вы можете писать простые и сложные файлы JSON и взаимодействовать со строками JSON внутри JavaScript.