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

Что такое JSON

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

• Number
• String
• Boolean
• Array
• Object
• null

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

• В формате данных 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 показывают атрибуты сотрудника. Атрибуты:

• name: имя сотрудника. Значение имеет тип String. Итак, он заключён в двойные кавычки.
• id: уникальный идентификатор сотрудника. Это снова тип String.
• role: роли которые выполняет сотрудник в организации. Сотрудник может выполнять несколько ролей. Таким образом предпочтительным типом данных является Array.
• age: текущий возраст сотрудника. Это типNumber.
• doj: дата приёма сотрудника в компанию. Поскольку это дата, она должна быть заключена в двойные кавычки и обрабатываться как String.
• married: женат ли сотрудник? Если да, то true или false. Значит значение типа Boolean.
• address: адрес сотрудника. Адрес может состоять из нескольких частей, таких как улица, страна, почтовый индекс и другие. Итак, мы можем рассматривать значение address как представление Object (с парами ключ–значение).
• referred-by: id, который направил этого сотрудника в организацию. Если этот сотрудник устроился по рекомендации, этот атрибут будет иметь тип String (как id). В противном случае он будет иметь значение null.

Теперь давайте создадим коллекцию сотрудников в виде данных 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.

Как конвертировать 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);

Результат:

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

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

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

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

Результат:

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

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

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

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