Что такое JSON, и работа с ним в JavaScript


JSON (JavaScript Object Notation) - это легкий формат для обмена данными. Хотя он создан на основе JavaScript - он может использоваться со многими языками программирования. Однако в этой статье мы сосредоточимся на использовании JSON в JavaScript.



Где мы будем использовать JSON?

Некоторые скрипты включают в себя:
  • Хранение данных
  • Конфигурация и проверка данных
  • Генерация структур данных из пользовательского ввода
  • Передача данных с клиента на сервер, с сервера на клиент и между серверами
Примечание об AJAX - JSON часто используется с AJAX или асинхронным JavaScript и XML. AJAX используется для передачи данных без обновления страницы браузера. Далее в этой статье мы рассмотрим, как сделать запрос AJAX в файл JSON и вывести содержимое в браузер.

Синтаксис и структура

Обычно вы встречаете JSON, сохраненный в файле .json. Файлы JSON состоят из серии пар ключ / значение. 

{"ключ": "значение"}
Обратите внимание, что ключ и значение заключены в двойные кавычки. Если бы это был литерал объекта JavaScript - нам не нужны были бы кавычки вокруг ключа, только строковое значение. Чтобы проанализировать это как действительный JSON, нам нужно помнить, чтобы наши ключи оставались в кавычках, а также следовали за конкретными типами данных, которые следуют ..

Типы данных

Следующие типы данных могут использоваться с JSON:
  • string (в двойных кавычках)
  • числа
  • объекты
  • массивы
  • Booleans (true или false)
  • null
Каждый из типов данных, которые передаются в JSON как значения, будет поддерживать свой собственный синтаксис, строки будут заключены в двойные кавычки, а числа не будут.

Случаи применения

Давайте рассмотрим пример JSON-файла contacts.json: 

{
  "имя": "Тимоти",
  "возраст": 35,
  "адрес":{
        "Улица": "1 Main St",
        "город": "Монреаль"
  },
  "интересы": ["готовка", "велосипед"]
}
Здесь у нас есть имя, заданное в виде строки, возраст как число, адрес - внедренный объект, а интересы - массив строк.

Когда вы работаете с JSON, вы можете также встретить JSON как объект или строку в контексте программы. Если ваш JSON-объект находится в файле .js или .html - он, вероятно, будет в переменной. Тогда наш пример будет выглядеть так: 

let contacts = {
  имя: "Тимоти",
  возраст: 35,
  адрес:{
        улица: "1 Main St",
        город: "Монреаль"
  },
  интересы: ["кулинария", "велосипед"]
}
Или, если он хранится в виде строки, он будет однострочным: 
let contacts = {"name": "Timothy", "age": 35, "address": {"street": "1 Main St", "city": "Montreal"}, "интересов": ["кулинария" , "велосипед"]}
Конечно, запись в формате JSON на нескольких строках делает его более читабельным, особенно при работе с большим количеством данных. JSON игнорирует пробелы между его элементами, поэтому вы можете свободно распределять пары ключ-значение, чтобы сделать данные проще для глаз!

Работа с JSON в JavaScript

Давайте разберем наш собственный пример! Откройте ваш текстовый редактор и создайте такой HTML-файл: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSON Demo</title>
</head>
<body>
  <script> 
    let contacts = {
      name: "Timothy",
      age: 35,
      address: {
        street: "1 Main St",
        city: "Montreal"
      },
      interests: ["cooking", "biking"]
    }
  </script>
</body>
</html>
Мы можем получить доступ к нашим данным JSON через консоль, используя точечные обозначения, например: 

contacts.name //Timothy
contacts.age // 35
contacts.address.street // 1 Main St
contacts.address.city // Montreal
contacts.interests [0] // cooking
contacts.interests [1] // biking
Когда мы хотим передать или сохранить наши данные, очень полезно иметь возможность преобразовать наш объект JSON в строку с помощью JSON.stringify(). И аналогично преобразуйте строку обратно в объект, используя JSON.parse ().

JSON.stringify()

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

Давайте вернем наш предыдущий пример и назначим метод JSON.stringify() переменной s. Мы передаем объект наших контактов в функцию. 

let contacts = {
  name: "Timothy",
  age: 35,
  address: {
    street: "1 Main St",
    city: "Montreal"
  },
  interests: ["cooking", "biking"]
}
let s = JSON.stringify(contacts);
Если мы теперь посмотрим на s в консоли, то увидим доступный нам JSON в виде строки, а не объекта. 

'{"name":"Timothy","age":35,"address":{"street":"1 Main St","city":"Montreal"},"interests":["cooking","biking"]}'
Функция JSON.stringify () позволяет нам преобразовывать объекты в строки. Чтобы сделать обратное, мы используем функцию JSON.parse().

JSON.parse()

Чтобы преобразовать строку обратно в функцию, мы используем встроенную функцию JSON.parse (), чтобы декодировать строку. 

let contacts = JSON.parse(s);
Теперь мы можем получить доступ к данным как обычный объект JavaScript. 

contacts.name  // Timothy
Цикл по массиву

При работе с JSON часто необходимо проходить по массивам объектов. Давайте создадим быстрый массив: 

let users = [
  {
    name: "Timothy",
    age: 35
  },
  {
    name: "Georgette",
    age: 29
  },
  {
    name: "Craig",
    age: 54
  }
];
И давайте создадим цикл for, чтобы перебрать наши данные: 

for (var i = 0; i < users.length; i++) {
	console.log(users[i].name);
}
------------
вывод:
Timothy
Georgette
Craig
------------
Теперь давайте вернемся к нашему HTML-файлу: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSON Demo</title>
</head>
<body>
  <ul id="users"></ul>
  <script>
    let contacts = {
      name: "Timothy",
      age: 35,
      address: {
        street: "1 Main St",
        city: "Montreal" 
      },
      interests: ["cooking", "biking"]
    }
    // let s = JSON.stringify(contacts);
    // let s = JSON.parse(contacts);
    let users = [
      {
        name: "Timothy",
        age: 35
      },
      { 
        name: "Georgette",
        age: 29 
      },
      {
        name: "Craig",
        age: 54
      }
    ];
    let output = '';
    for (var i = 0; i < users.length; i++) {
      // console.log(users[i].name); 
      output += '<li>'+users[i].name+'</li>';
    }
    document.getElementById('users').innerHTML = output;
  </script>
</body>
</html>
Обратите внимание на изменения, выделенные жирным шрифтом. Я добавил элемент ul для хранения нашего вывода. И выходная переменная в нашем скрипте, которая хранит наши данные из цикла через getElementById.

Доступ к JSON из URL

В большинстве случаев нам потребуется доступ к JSON с URL-адреса. Для этого требуется дополнительный шаг - мы будем использовать AJAX, чтобы сделать GET-запрос для файла. Для нашей демонстрации давайте возьмем приведенную выше строку JSON и поместим ее в новый файл с именем users.json. Это должно выглядеть так: 

[
  {
    "name": "Timothy",
    "age": 35
  },
  { 
    "name": "Georgette",
    "age": 29
  }, 
  { 
    "name": "Craig",
    "age": 54
  }
]
Примечание: так как это файл JSON (не объект), вы должны заключить в кавычки ваши ключи!

Теперь мы сделаем XMLHttpRequest(). 

let request = new XMLHttpRequest ();
Мы откроем файл users.json с помощью запроса GET (URL). 

request.open ('GET', 'users.json', true);
Конечно, если ваш файл JSON хранится снаружи, вы должны заменить «users.json» на полный URL-адрес. Теперь мы анализируем наши данные JSON в функции onload. А затем переберите данные, отображая в нашем элементе ul. 

request.onload = function () {
  // Преобразование данных JSON в объект
  let users = JSON.parse (this.response);
  let output = '';
  для (var i = 0; i <users.length; i ++) {
    output + = '<li>' + users [i] .name + 'is' + users [i] .age + 'years old.'; </ Li> '
  }
  document.getElementById ('users'). innerHTML = output;
}
Тогда, наконец, мы отправляем запрос! 

request.send ();
Вот последний код. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSON Demo</title>
</head>
<body>
  <ul id="users"></ul>
  <script>
    let request = new XMLHttpRequest();
    request.open('GET', 'users.json', true);
      request.onload = function () {
      // Convert JSON data to an object
      let users = JSON.parse(this.response);
      let output = '';
      for (var i = 0; i < users.length; i++) {
        output += '<li>' + users[i].name + ' is ' + users[i].age + ' years old.'; '</li>'
      }
      document.getElementById('users').innerHTML = output;
    }
    request.send();
  </script>
</body>
</html>
Мы почти закончили!

Но если вы откроете файл HTML сейчас, вы получите ошибку в консоли. Поскольку мы вызываем users.json из файловой системы, а не из реального домена (это протокол безопасности браузера). Итак, чтобы проверить это локально, нам нужно запустить его на локальном сервере.

Если у вас установлен xampp, загрузите его в свой webroot. Однако более простым решением было бы установить liveserver через npm. Убедитесь, что у вас установлен NodeJS, и запустите npm install -g live-server из каталога, где хранится ваш HTML-файл.

После завершения установки модуля вы просто запускаете live-сервер из того же каталога, и он открывает файл HTML на локальном сервере. И наши данные будут распечатаны как указано! 

Timothy is 35 years old.
Georgette is 29 years old.
Craig is 54 years old.
Использование Fetch

Fetch API - это новая встроенная функция JavaScript, которая значительно упрощает работу с запросами и ответами. Мы можем использовать Fetch с нашими данными следующим образом: 

fetch('./users.json').then(response => {
  return response.json();
}).then(data => {
 // Работаем с данными JSON здесь ..
  console.log(data);
}).catch(err => {
// Что делать при сбое запроса
  console.log('Запрос не выполнен!'); 
});
Использование jQuery

Если вы используете в своем проекте jQuery, вы можете получить данные с помощью функции getJSON (). 

  $.getJSON('users.json', function (data) {
     // Работаем с данными JSON здесь ..
    console.log(data[0].name);
  });
});
Не забудьте подключить jQuery перед этой функцией, если вы ее тестируете!

Заключение

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

Если вам требуется помощь в программировании, то я вам её окажу за небольшую плату. Пишите, все мои контакты тут.
Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

тегистатьи IT, javascript, json




Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.



Наполнение сайтов
А так ли вредно курить?
Урок 24. Получение информации DateTime C#