Что такое JSON, и работа с ним в JavaScript
JSON (JavaScript Object Notation) - это легкий формат для обмена данными. Хотя он создан на основе JavaScript - он может использоваться со многими языками программирования. Однако в этой статье мы сосредоточимся на использовании JSON в JavaScript.
Где мы будем использовать JSON?
Некоторые скрипты включают в себя:
- Хранение данных
- Конфигурация и проверка данных
- Генерация структур данных из пользовательского ввода
- Передача данных с клиента на сервер, с сервера на клиент и между серверами
Синтаксис и структура
Обычно вы встречаете JSON, сохраненный в файле .json. Файлы JSON состоят из серии пар ключ / значение.
{"ключ": "значение"}
Обратите внимание, что ключ и значение заключены в двойные кавычки. Если бы это был литерал объекта JavaScript - нам не нужны были бы кавычки вокруг ключа, только строковое значение. Чтобы проанализировать это как действительный JSON, нам нужно помнить, чтобы наши ключи оставались в кавычках, а также следовали за конкретными типами данных, которые следуют ..
Типы данных
Следующие типы данных могут использоваться с JSON:
- string (в двойных кавычках)
- числа
- объекты
- массивы
- Booleans (true или false)
- null
Случаи применения
Давайте рассмотрим пример 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 - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.
Читайте также:
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.
Программы на заказ
Отзывы
Контакты