На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Что такое 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 широко применяется в отрасли и является фундаментальным навыком для всех серьезных разработчиков.

Если вам требуется помощь в программировании, то я вам её окажу за небольшую плату. Пишите, все мои контакты тут.




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

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




Логарифм
Хитрости игры в дурака: урок №1


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.