Объяснение JSON простым языком

Источник: «JSON for Beginners – JavaScript Object Notation Explained in Plain English»
Долгое время XML был предпочтительным форматом данных для обмена между двумя точками. Затем, в начале 2000 года, был представлена JSON как альтернативный формат данных для обмена информацией. В этой статье вы узнаете всё о JSON. Вы поймёте, что это такое, как им пользоваться, и мы проясним несколько заблуждений.

Что такое JSON

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

Обратите внимание на несколько важных правил:

Вот так выглядят простые данные в JSON:

{
"name": "Alex C",
"age": 2,
"city": "Huston"
}

Валидные данные JSON могут быть в двух разных форматах:

[
{
"name": "Alex C",
"age": 2,
"city": "Huston"
},
{
"name": "John G",
"age": 40,
"city": "Washington"
},
{
"name": "Bala T",
"age": 22,
"city": "Bangalore"
}
]

Предположим у вас опыт работы с JavaScript. В этом случае вам может показаться, что формат JSON и объекты JavaScript (и массив объектов) очень похожи. Но это не так. Скоро мы подробно рассмотрим различия.

Структура JSON была взята из синтаксиса объекта JavaScript. Это единственная связь между форматом данных JSON и объектами JavaScript.

JSON - это формат данных не зависящий от языка программирования. Мы можем использовать формат данных JSON в Python, Java, PHP и многих других языках программирования.

Примеры формата данных JSON

Вы можете сохранить данные JSON в файле с расширением .json. Давайте создадим файл employee.json с атрибутами (представленными парами "ключ–значение") сотрудника.

{
"name": "Aleix Melon",
"id": "E00245",
"role": ["Dev", "DBA"],
"age": 23,
"doj": "11-12-2019",
"married": false,
"address": {
"street": "32, Laham St.",
"city": "Innsbruck",
"country": "Austria"
},
"referred-by": "E0012"
}

Приведённые выше данные JSON показывают атрибуты сотрудника. Атрибуты:

Теперь давайте создадим коллекцию сотрудников в виде данных JSON. Для этого нужно хранить записи нескольких сотрудников в квадратных скобках [...].

[
{
"name": "Aleix Melon",
"id": "E00245",
"role": ["Dev", "DBA"],
"age": 23,
"doj": "11-12-2019",
"married": false,
"address": {
"street": "32, Laham St.",
"city": "Innsbruck",
"country": "Austria"
},
"referred-by": "E0012"
},
{
"name": "Bob Washington",
"id": "E01245",
"role": ["HR"],
"age": 43,
"doj": "10-06-2010",
"married": true,
"address": {
"street": "45, Abraham Lane.",
"city": "Washington",
"country": "USA"
},
"referred-by": null
}
]

Обратили внимание на значение атрибута referred-by для второго сотрудника Bob Washington? Это null. Значит его не рекомендовал ни один из сотрудников.

Как использовать данные JSON как строковое значение

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

Давайте рассмотрим пример, чтобы понять, как это можно сделать в JavaScript. Вы можете заключить все данные JSON в виде строки в одинарные кавычки '...'.

const user = '{"name": "Alex C", "age": 2, "city": "Huston"}';

Если вы хотите сохранить форматирование JSON без изменений, вы можете создать данные JSON с помощью литералов шаблона.

const user = `{
"name": "Alex C",
"age": 2,
"city": "Huston"
}
`
;

Это также удобно, когда вы хотите создавать данные JSON с динамическими значениями.

const age = 2;

const user = `{
"name": "Alex C",
"age":
${age},
"city": "Huston"
}
`
;

console.log(user);

// Output
{
"name": "Alex C",
"age": 2,
"city": "Huston"
}

Объекты JavaScrip и JSON это НЕ одно и тоже

Формат данных JSON является производным от объектной структуры JavaScript. Но на этом сходства заканчиваются.

Объекты в JavaScript:

Как конвертировать JSON в Объект JavaScript, и обратно

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

Как конвертировать данные JSON в Объект JavaScript

Для преобразования данных JSON в объект JavaScript, используйте метод JSON.parse(). Он преобразует валидную строку JSON в Объект JavaScript.

const userJSONData = `{
"name": "Alex C",
"age": 2,
"city": "Huston"
}
`
;

const userObj = JSON.parse(userJSONData);
console.log(userObj);

Результат:

 Преобразование данных JSON в объект JavaScript

Как конвертировать Объект JavaScript в данные JSON

Для преобразования объекта JavaScript в данные JSON, используйте метод JSON.stringify().

const userObj = {
name: 'Alex C',
age: 2,
city: 'Huston'
}

const userJSONData = JSON.stringify(userObj);
console.log(userJSONData);

Результат:

Преобразование объекта JavaScript в данные JSON

Вы обратили внимание на термин JSON, который мы использовали для вызова методов parse() и stringify()? Это встроенный объект JavaScript с именем JSON (также можно было бы назвать JSONUtil), но он не имеет отношения к формату данных JSON, который мы обсуждали до сих пор. Так что, пожалуйста не запутайтесь.

Как обрабатывать ошибки JSON такие, как "Unexpected token in JSON at position"?

При обработке JSON вполне нормально получить такую ошибку при преобразовании данных JSON в объект JavaScript:

Unexpected token in JSON at position

Каждый раз когда вы сталкиваетесь с этой ошибкой, проверьте валидность ваших данных JSON/ Вероятно, вы допустили тривиальную ошибку и в этом её причина. Вы можете проверить формат ваших данных JSON с помощью JSON линтера.

Дополнительные материалы

Предыдущая Статья

Защитный CSS — коллекция сниппетов

Следующая Статья

Деструктурирующее присваивание массива в ES6