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;
  • Массив — [18, true, "lost", [4, 8, 15, 16, 23, 42]];
  • Объект — {"isValid": true, "isPayed": false}.

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

  • Методы объектов (функции) — {greetings() {alert("Hello World!")}};
  • Ключи со значением undefined{"value": undefined}.

Если нужно сохранить JSON в файл, то используют расширение .json.

Как понять

Скопировано

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}}'

        
        
          
        
      

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

        
          
          {  "nickname": "BestHealerEver",  "level": 7,  "age": 141,  "race": "Gnome",  "things": ["sword", "helmet", "belt"],  "isImmortal": false,  "money": { "gold": 6387, "silver": 1264, "bronze": 931, "diamonds": 2 }}
          {
  "nickname": "BestHealerEver",
  "level": 7,
  "age": 141,
  "race": "Gnome",
  "things": ["sword", "helmet", "belt"],
  "isImmortal": false,
  "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.