Enter
    Расширенный поиск
    Клавиша / esc

    Веб-платформа

    JSON

    Самый популярный формат обмена данными между приложениями.

    Время чтения: меньше 5 мин

    Кратко

    Скопировано

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

    Как пишется

    Скопировано
            
          
          {  "brand": "Apple",  "model": "iPhone 11 Pro",  "isAvailable": true,  "display": 5.8,  "memories": [64, 256, 512],  "features": {    "tripleCamera": true,    "faceId": true,    "touchId": false,    "eSIM": true  }}
          {
  "brand": "Apple",
  "model": "iPhone 11 Pro",
  "isAvailable": true,
  "display": 5.8,
  "memories": [64, 256, 512],
  "features": {
    "tripleCamera": true,
    "faceId": true,
    "touchId": false,
    "eSIM": true
  }
}

    JSON состоит из пар ключ-значение. Пары разделяются между собой запятыми — ,, а ключ отделяется от значения через двоеточие — :. Ключом может быть только строка, обёрнутая в двойные кавычки. А вот значением — почти всё что угодно:

    • Строка в двойных кавычках — "I love JSON!";
    • Число — 21;
    • Логические значения — true и false;
    • Массив — [18, true, "lost", [4, 8, 15, 16, 23, 42]];
    • Объект — {"isValid": true, "isPayed": false}.
    • null

    JSON основан на JavaScript, но остаётся независимой от языка спецификацией для данных.

    Как понять

    Скопировано

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

    Спецификация формата JSON определена стандартом ECMA-404. А то, как JSON используется в JavaScript, описывает Спецификация ECMAScript.

    В процессе преобразования JavaScript-объекта в JSON не попадут:

    • Поля со значением, равным примитивам undefined или Symbol;
    • Функции (методы объектов) — {greetings() {alert("Hello World!")}};
    • Поля с Symbol-ключами.

    Некоторые значения преобразуются в null:

    Значения, равные объектам Map и Set, будут преобразованы в {}.

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

    1. Отправляем запрос на сервер;
    2. Ждём ответ;
    3. Получаем JSON с набором данных;
    4. Превращаем JSON в объект JavaScript;
    5. Используем данные.

    Пример:

    Открыть демо в новой вкладке

    Преобразование в JSON

    Скопировано

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

    Преобразуем JavaScript-объект в JSON:

            
          
          const hero = {  nickname: "BestHealerEver",  level: 7,  age: 141,  race: "Gnome",  isImmortal: false,  things: ["sword", "helmet", "belt"],  money: {    gold: 6387,    silver: 1264,    bronze: 931,    diamonds: 2,  },}console.log(typeof hero)// objectconsole.log(typeof JSON.stringify(hero))// stringconsole.log(JSON.stringify(hero))// '{"nickname":"BestHealerEver","level":7,"age":141,"race":"Gnome","isImmortal":false,"things":["sword","helmet","belt"],"money":{"gold":6387,"silver":1264,"bronze":931,"diamonds":2}}'
          const hero = {
  nickname: "BestHealerEver",
  level: 7,
  age: 141,
  race: "Gnome",
  isImmortal: false,
  things: ["sword", "helmet", "belt"],
  money: {
    gold: 6387,
    silver: 1264,
    bronze: 931,
    diamonds: 2,
  },
}

console.log(typeof hero)
// object
console.log(typeof JSON.stringify(hero))
// string
console.log(JSON.stringify(hero))
// '{"nickname":"BestHealerEver","level":7,"age":141,"race":"Gnome","isImmortal":false,"things":["sword","helmet","belt"],"money":{"gold":6387,"silver":1264,"bronze":931,"diamonds":2}}'

    Результатом конвертации будет строка.

    JSON.stringify() также поддерживает два дополнительных аргумента:

    • replacer — функция или массив, позволяющие изменить стандартное преобразование. Например, если replacer это массив ['nickname', 'age'], то только эти свойства объекта попадут в результирующую строку.
    • space — строка или число пробелов, которые будут использоваться для форматирования результата. Это позволяет улучшить читаемость и представить результат в более наглядном виде.

    Например, отформатируем результат предыдущего примера:

            
          
          console.log(JSON.stringify(hero, null, 2))// {//   "nickname": "BestHealerEver",//   "level": 7,//   "age": 141,//   "race": "Gnome",//   "isImmortal": false,//   "things": [//     "sword",//     "helmet",//     "belt"//   ],//   "money": {//     "gold": 6387,//     "silver": 1264,//     "bronze": 931,//     "diamonds": 2//   }// }
          console.log(JSON.stringify(hero, null, 2))

// {
//   "nickname": "BestHealerEver",
//   "level": 7,
//   "age": 141,
//   "race": "Gnome",
//   "isImmortal": false,
//   "things": [
//     "sword",
//     "helmet",
//     "belt"
//   ],
//   "money": {
//     "gold": 6387,
//     "silver": 1264,
//     "bronze": 931,
//     "diamonds": 2
//   }
// }

    Пример преобразования объекта JavaScript в формат JSON

    Скопировано
    Открыть демо в новой вкладке

    Преобразование из JSON

    Скопировано

    Преобразовать строку с JSON в объект JavaScript можно с помощью метода JSON.parse(). Он принимает JSON-строку в качестве аргумента.

    Попробуем преобразовать JSON:

            
          
          {  "name": "Luke Skywalker",  "height": "172",  "mass": "77",  "hair_color": "blond",  "skin_color": "fair",  "eye_color": "blue",  "birth_year": "19BBY",  "gender": "male"}
          {
  "name": "Luke Skywalker",
  "height": "172",
  "mass": "77",
  "hair_color": "blond",
  "skin_color": "fair",
  "eye_color": "blue",
  "birth_year": "19BBY",
  "gender": "male"
}

    С помощью JSON.parse() мы получим стандартный объект, с которым можно взаимодействовать:

            
          
          const json =  '{"name":"Luke Skywalker","height":"172","mass":"77","hair_color":"blond","skin_color":"fair","eye_color":"blue","birth_year":"19BBY","gender":"male"}'const jedi = JSON.parse(json)console.log(jedi.name)// Luke Skywalkerconsole.log(jedi.gender)// maleconsole.log(jedi.birth_year)// 19BBY
          const json =
  '{"name":"Luke Skywalker","height":"172","mass":"77","hair_color":"blond","skin_color":"fair","eye_color":"blue","birth_year":"19BBY","gender":"male"}'
const jedi = JSON.parse(json)

console.log(jedi.name)
// Luke Skywalker
console.log(jedi.gender)
// male
console.log(jedi.birth_year)
// 19BBY

    В случае, если строка невалидный JSON-код, метод JSON.parse() выбросит ошибку SyntaxError.

    На практике

    Скопировано

    Алекс Стегура советует

    Скопировано

    🛠 JSON очень удобно использовать для получения данных в сети. Например, один из популярных сервисов прогноза погоды, Open Weather, может отдавать данные в JSON через API. Вот JSON с погодой в Лондоне.

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

    🛠 JSON не поддерживает комментарии, JavaScript-комментарий // комментарий приведёт к ошибке.

    🛠 Альтернативные форматы передачи данных — XML и YAML.

    🛠 Наиболее известным JSON-файлом является конфигурационный файл менеджера пакетов npm - package.json.

    Читайте также