JSON

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.stringify(). Первым аргументом метод принимает значение, которое нужно преобразовать.

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

        
          
          let 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))
          let 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",  "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 }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Преобразовать строку с 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() мы получим стандартный объект, с которым можно взаимодействовать:

        
          
          let json =  '{"name":"Luke Skywalker","height":"172","mass":"77","hair_color":"blond","skin_color":"fair","eye_color":"blue","birth_year":"19BBY","gender":"male"}'let jedi = JSON.parse(json)console.log(jedi.name) // Luke Skywalkerconsole.log(jedi.gender) // maleconsole.log(jedi.birth_year) // 19BBY
          let json =
  '{"name":"Luke Skywalker","height":"172","mass":"77","hair_color":"blond","skin_color":"fair","eye_color":"blue","birth_year":"19BBY","gender":"male"}'
let 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.

На практике

Секция статьи "На практике"

stegur

Секция статьи "stegur"

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

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

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

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

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