Форматы JSON и XML
JSON (JavaScript Object Notation) представляет легковесный формат хранения данных. JSON описывает структуру и организацию данных JavaScript. Простота JSON привела к тому, что в настоящий момент он является наиболее популярным форматом передачи данных в среде web, вытеснив другой некогда популярный формат xml.
Объекты JSON очень похожи на объекты JavaScript, тем более что JSON является подмножеством JavaScript. В то же время важно их различать: JavaScript является языком программирования, а JSON является форматом данных.
JSON поддерживает три типа данных: примитивные значения, объекты и массивы. Примитивные значения представляют стандартные строки, числа, значение null, логические значения true и false.
Объекты представляют набор простейших данных, других объектов и массивов. Например, типичный объект JSON:
В javascript этому объекту соответствовал бы следующий:
const user =
Несмотря на общее сходство, в то же время есть и различия: в JSON названия свойств заключаются в двойные кавычки, как обычные строки. Кроме того, объекты JSON не могут хранить функции, переменные, как объекты javascript.
Объекты могут быть сложными:
Массивы в JSON похожи на массивы javascript и также могут хранить простейшие данные или объекты:
["Tom", true, 30]
Сериализация в JSON и десериализация
Для работы с форматом JSON в языке JavaScript предназначен JSON . Он позволяет преобразовать объект JavaScript в формат json и наоборот.
Для сериализации объекта javascript в json применяется функция JSON.stringify() :
// объект javascript const user = < name: "Tom", married: false, age: 39 >; // объект json const serializedUser = JSON.stringify(user); console.log(serializedUser); //
Для обратной операции — десериализации или парсинга json-объекта в javascript применяется метод JSON.parse() :
const user = < name: "Tom", married: false, age: 39 >; // сериализация const serializedUser = JSON.stringify(user); // десериализация const tomUser = JSON.parse(serializedUser); console.log(tomUser.name); // Tom
Как работать с JSON
Освойте основы работы с JSON в веб-разработке: синтаксис, преобразование данных и примеры использования.
Алексей Кодов
Автор статьи
1 июня 2023 в 8:46
JSON (JavaScript Object Notation) — это легкий формат обмена данными, основанный на синтаксисе JavaScript. Он широко используется в веб-разработке для передачи данных между клиентом и сервером. В этой статье мы рассмотрим основы работы с JSON, включая его синтаксис, методы для преобразования данных и примеры использования.
Синтаксис JSON
JSON представляет собой текстовый формат, который состоит из пар ключ-значение, организованных в объекты <> и массивы [] . Ключи в JSON должны быть строками, заключенными в двойные кавычки, а значения могут быть строками, числами, логическими значениями, объектами, массивами или специальным значением null .
Работа с JSON в JavaScript
JavaScript предоставляет два метода для работы с JSON: JSON.parse() и JSON.stringify() .
JSON.parse()
Этот метод используется для преобразования JSON-строки в объект или массив JavaScript. Пример использования:
const jsonString = ''; const jsonObject = JSON.parse(jsonString); console.log(jsonObject.name); // Вывод: John
JSON.stringify()
Этот метод преобразует объект или массив JavaScript в JSON-строку. Пример использования:
const jsonObject = < name: "John", age: 30, isStudent: false >; const jsonString = JSON.stringify(jsonObject); console.log(jsonString); // Вывод:
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Примеры работы с JSON
Загрузка JSON с сервера
Часто JSON-данные загружаются с сервера с помощью функции fetch() . Вот пример такого кода:
fetch('https://api.example.com/data') .then(response => response.json()) .then(data => < console.log(data); // Вывод: данные в формате JSON, полученные с сервера >) .catch(error => < console.error('Ошибка загрузки JSON:', error); >);
Отправка JSON на сервер
Для отправки данных на сервер в формате JSON можно использовать следующий код:
const data = < name: "John", age: 30, isStudent: false >; fetch('https://api.example.com/data', < method: 'POST', headers: < 'Content-Type': 'application/json' >, body: JSON.stringify(data) >) .then(response => response.json()) .then(responseData => < console.log(responseData); // Вывод: ответ сервера на отправленный JSON >) .catch(error => < console.error('Ошибка отправки JSON:', error); >);
�� Теперь вы знаете основы работы с JSON и можете применять их на практике в своих веб-проектах. Не забывайте, что для более глубокого изучения веб-разработки всегда можно обратиться к курсам и материалам знакомой школы, воспользовавшись специальным тегом
JavaScript – формат JSON и примеры работы с ним
JSON (JavaScript Object Notation) – это текстовый формат представления данных в нотации объекта JavaScript. Предназначен JSON, также как и некоторые другие форматы такие как XML и YAML, для обмена данными.
Несмотря на своё название, JSON можно использовать не только в JavaScript, но и в любом другом языке программирования.
JSON по сравнению с другими форматами также обладает достаточно весомым преимуществом. Он в отличие от них является более компактным, а это очень важно при обмене данными в сети Интернет. Кроме этого, JSON более прост в использовании, его намного проще читать и писать.
При веб-разработке JSON очень часто применяется в качестве формата для передачи информации от веб-сервера клиенту (веб-браузеру) при AJAX запросе.
Как выглядит этот процесс? Его можно представить в виде двух шагов. На первом шаге, сервер, по запросу пришедшему ему от клиента, сначала формирует некоторый набор данных в удобном формате, который затем можно было бы очень просто упаковать в строку JSON. Завершается работа на сервере отправкой JSON данных в качестве результата клиенту. На втором шаге, клиент получает в качестве ответа от сервера строку JSON и распаковывает её, т.е. переводит в JavaScript объект. После этого на клиенте выполняются дальнейшие с ними действия, например, выводятся на страницу.
Это один из примеров использования формата JSON. Но его применение не ограничивается только этим сценарием, их очень много и не только в веб.
В JSON, в отличие от XML и YAML, данные организованы также как в объекте JavaScript. Но JSON – это не объект, а строка. При этом не любой объект JavaScript может быть переведён один к одному в JSON. Например, если у объекта есть методы, то они при преобразовании в строку JSON будут проигнорированы и не включены в неё.
Структура формата JSON
Структура строки JSON практически ничем не отличается от записи JavaScript объекта.
Она состоит из набора пар ключ-значения . В этой паре ключ отделяется от значения с помощью знака двоеточия ( : ), а одна пара от другой — с помощью запятой ( , ). При этом ключ в JSON, в отличие от объекта обязательно должен быть заключен в двойные кавычки . Это первое отличие JSON от JavaScript объекта. В объекте ключ (имя свойства) не обязательно следует заключать в двойные кавычки.
JavaScript
// строка JSON var jsonPerson = '{"name":"Иван","age":25}'; // объект JavaScript var person = { name: "Иван", age: 25 };Чтобы не усложнять доступ к данным, при задании ключам имён лучше придерживаться тех же правил, что и при именовании переменных.
Второе отличие заключается в том, что значение ключа в JSON можно задать только в одном из следующих форматов: string (строкой), number (числом), object (объектом), array (массивом), boolean (логическим значением true или false ) или null (специальным значением JavaScript). Например, значение ключа в JSON не может быть функцией или датой (объектом типа Date ).
JavaScript
// объект JavaScript var person = { name: "Иван", birthDay: new Date(Date.UTC(1985, 03, 05)), getAge: function () { var ageDate = new Date(Date.now() - this.birthDay.getTime()); return Math.abs(ageDate.getUTCFullYear() - 1970); } }; // строка JSON var jsonPerson = '{"name":"Иван","birthDay":"1985-04-05T00:00:00.000Z"}';Пример JSON строки, состоящей из различных типов данных:
JavaScript
{ "name": "Иван", "age": 37, "mother": { "name": "Ольга", "age": 58 }, "children": [ "Маша", "Игорь", "Таня" ], "married": true, "dog": null }В ней ключ «name» имеет в качестве значения строку, «age» — число, «mother» — объект, состоящий из «name» и «age», «children» — массив, «married» — логический тип, «dog» — null .
При этом стоит обратить внимание на то, что JSON не допускает использование внутри своей структуры комментариев.
Работа с JSON в JavaScript
Как было уже отмечено выше, JSON – это строка.
JavaScript
// переменная personData, содержит в качестве значения строку в формате JSON var personData = '{"name":"Иван","age":37,"mother":{"name":"Ольга","age":58},"children":["Маша","Игорь","Таня"],"married": true,"dog":null}';Работа с JSON в JavaScript обычно осуществляется в двух направлениях:
- перевод строки JSON в объект (данный процесс ещё называют парсингом);
- конвертирование объекта в строку JSON (другими словами действие обратное парсингу).
Парсинг JSON
Парсинг JSON (перевод строки JSON в объект JavaScript) осуществляется с помощью метода eval или parse .
Пример использования eval для парсинга JSON:
JavaScript
var person = eval('('+personData+')');Метод eval не рекомендуется использовать так как он не безопасен. Так если кто-то сможет добавить скрипт в строку JSON, то он выполнится.
В JavaScript для парсинга строки в JSON рекомендуется использовать метод JSON.parse . Он такой уязвимости не имеет.
Использование метода JSON.parse :
JavaScript
// переменная person - это объект JavaScript, который получен путём парсинга строки JSON var person = JSON.parse(personData);Конвертирование объекта JavaScript в строку JSON
Перевод объекта JavaScript в строку JSON осуществляется с помощью метода JSON.stringify . Данный метод осуществляет действие обратное методу JSON.parse .
JavaScript
var personString = JSON.strigify(person);Преимущества формата JSON
Формат представления данных JSON имеет следующие преимущества:
- удобные и быстрые в работе методы, предназначенные для конвертации (парсинга) строки JSON в объект JavaScript и обратно;
- понятная и простая структура данных;
- очень маленький размер по сравнению с другими форматами данных (например XML). Это связано с тем, что формат JSON содержит минимальное возможное форматирование, т.е. при его написании используется всего несколько специальных знаков. Это очень важное преимущество, т.к. данные представленные в формате JSON будут быстрее загружаться, чем, если бы они были бы представлены в других форматах.
Из-за того что данный формат имеет очень много преимуществ он стал применяться не только в JavaScript, но и во многих других языках, таких как C, Ruby, Perl, Python, PHP и т.д.
Сравнение форматов JSON и XML
Формат JSON имеет следующие преимущества перед форматом XML:
- При передаче некоторых данных размер JSON будет значительно меньше, чем размер XML.
- JSON имеет более удобные методы конвертации в структуры данных JavaScript, чем XML.
- JSON более просто создавать, чем XML.
Работа с данными JSON после парсинга
Работа с данными JSON после парсинга осуществляется как с объектом JavaScript.
JavaScript
//JSON var personData = '{"name":"Иван","age":37,"mother":{"name":"Ольга","age":58},"children":["Маша","Игорь","Таня"],"married": true,"dog": null}'; //Объект JavaScript person var person = JSON.parse(personData);Рассмотрим основные моменты:
JavaScript
//получить значения ключа (свойства) name person.name; person["name"]; //получить значения ключа (свойства) name, находящегося в объекте mother person.mother.name; //удалить элемент age delete(person.age) //добавить (или обновить) ключ (свойство) person.eye = "карие"; //при работе с массивами необходимо использовать методы, предназначенные для работы именно с массивами //удалить 1 элементиз массива (метод splice) person.children.splice(1,1) //добавить элемент в массив (метод push) person.children.push("Катя");
Для перебора элементов в объекте можно использовать цикл for..in :
JavaScript
for (key in person) { if (person.hasOwnProperty(key)) { //ключ = key //значение = person[key] console.log("Ключ = " + key); console.log("Значение image" src="https://itchief.ru/assets/images/tickets/2015.12/javascript-for-in-object.png" alt="JavaScript - Перебор элементов в объекте" title="JavaScript - Перебор элементов в объекте"> Для перебора элементов массива можно использовать следующий цикл:
JavaScript for (var i=0; i