JavaScript – формат JSON и примеры работы с ним
Урок, в котором рассматривается, что такое JSON и какие он имеет преимущества по сравнению с другими форматами данных.
Понятие 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 объекта. В объекте ключ (имя свойства) не обязательно следует заключать в двойные кавычки.
Например:
// строка 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
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 строки, состоящей из различных типов данных:
{
"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 – это строка.
// переменная 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:
var person = eval('('+personData+')');
Метод eval
не рекомендуется использовать так как он не безопасен. Так если кто-то сможет добавить скрипт в строку JSON, то он выполнится.
В JavaScript для парсинга строки в JSON рекомендуется использовать метод JSON.parse
. Он такой уязвимости не имеет.
Использование метода JSON.parse
:
// переменная person - это объект JavaScript, который получен путём парсинга строки JSON
var person = JSON.parse(personData);
Конвертирование объекта JavaScript в строку JSON
Перевод объекта JavaScript в строку JSON осуществляется с помощью метода JSON.stringify
. Данный метод осуществляет действие обратное методу JSON.parse
.
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.
//JSON
var personData = '{"name":"Иван","age":37,"mother":{"name":"Ольга","age":58},"children":["Маша","Игорь","Таня"],"married": true,"dog": null}';
//Объект JavaScript person
var person = JSON.parse(personData);
Рассмотрим основные моменты:
//получить значения ключа (свойства) 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
:
for (key in person) {
if (person.hasOwnProperty(key)) {
//ключ = key
//значение = person[key]
console.log("Ключ = " + key);
console.log("Значение = " + person[key]);
} // если объект person имеет key (если у person есть свойство key)
} // перерабрать все ключи (свойства) в объекте

Для перебора элементов массива можно использовать следующий цикл:
for (var i=0; i<=person.children.length-1; i++) {
// if (person.children[i].hasOwnProperty(key)) {
//i = индекс
//значение = person.children[i]
console.log("Элемент [ "+ i +" ] = " + person.children[i]);
// }

Здравствуйте, передо мной стоит задача создать справочник, используя javascript. Для этой задачи я создал сайт с 8 объектами, в которых есть кнопка, и создал json файл, который должен содержать в себе картинку, название объекта и его описание. Я не могу сообразить, т.к. в JS я полный ноль, как мне при клике на кнопку в html объекте, переходить на другую, заранее созданную html страницу, и вносить соответствующие этому объекту данные из json файла в соответствующие html элементы(картинку в блок 'img', описание в элемент 'p' и т.д.). Я бы мог создать много html страниц с готовым форматом для каждого объекта, и ссылаться на них из родительской страницы, но это случится только тогда, когда я отчаюсь полностью. Спасибо.
Добрый день!
Передать данные на другую страницу можно, например, с помощью GET-параметра: Здесь при клике на любую ссылку откроется страница "02.html". Но первая будет передавать параметр id со значением 1, а вторая id со значением 2. Далее на второй странице мы можем получить этот GET-параметр и в зависимости от его значения получить соответствующие данные из JSON: Ну и сам JSON-файл:Большое спасибо, очень выручили
Сделал рекурсию, выводит только названия папок:
Отдаю так:
Помогите пожалуйста разобраться в написании функции для формирования нужного формата ответа с именем, путем и потомком. Спасибо.
Есть файл в формате json из него нужно удалить строки содержащие определенное слово, а оставшиеся строки записать в новый файл json. Как это проще всего сделать?
1. Опиши несколько очередей для разбора обращений. Должно получится три группы сотрудников по темам: еда, рассадка, другое. Каждая группа должна иметь доступ только ко своей очереди.
2. Добавь ссылки на все социальные сети (любые ссылки).
3. Добавь несколько кнопок: перевода, открытия и закрытия тикета.
Пример 1:
«support_line_1»: {
«criterions»: {
«fields/test_routing»: {
"#in": [
«support_line_1»
]
},
«sort»: {
"#in": [
«email»
]
}
},
«fields»: {
},
«name»: «Support Line 1»,
«permissions»: [
],
«precedence»: 1,
«profile»: «support-test»,
«sort_order»: 1,
«tags»: [
],
«target»: «supbox»,
«title_tanker»: «lines.support_line_1»,
«sorts»: [
«email»
]
},
Пример 2:
«support_line_3»: {
«search»: [
{
«permissions»: [
«supbox_support_test_3»
]
}
],
«decide»: [
{
«permissions»: [
«supbox_support_test_3»
Пример 3:
{
«action_id»: «close»,
«queues»: [
«support_line_1»,
«support_line_2»,
«support_line_3»
],
«query_params»: {
«kurilka_button»: «close_button»
},
«title»: «close»
},
Пример 4:
{
«ticket_sort»: [
«email»
],
«criterions»: {
«queue»: {
"#in": [
«support_line_1»,
«support_line_2»,
«support_line_3»
]
}
},
«iframe_url»: «vk.com/im»,
«site»: «vk.com/im»,
«name»: «Личка в ВК»
},
Пример 5:
{
«queues»: [
«support_line_1»,
«support_line_2»,
«support_line_3»
],
«output_sort»: «test»,
«project_id»: «137»,
«sort»: «email»
},
Например, можно заменить символы «}{» на «,» или на что-то другое:
Есть API вида:
Это карточки товаров и мне нужно вывести их на экран. Подключаю API при помощи fetch, вижу данные в консоли, а вывести в полноценном виде в браузер не получается.
Спасибо.
Вам нужно создать HTML шаблон карточки, а затем используя его сформировать результирующий HTML фрагмент проходя в цикле через полученные данные при помощи fetch. Ну и после этого вставить его на страницу в нужное место.
Загрузить JSON файл и распарсить его на клиенте можно, например, так (результат выводится в консоль):
Вот так я их забираю и сохраняю.
Вот так выглядит мой файл json после сохранения.
Вот так я их с файла забираю и пытаюсь выводить на страницу (как пример)
Но отображаются они у меня только тогда, если я через валидатор прогоняю свои данные в нормально виде (как пример)
Буду благодарен за отклик!
Если у вас нет доступа к этим данным напрямую со страницы, то в этом случае их нужно получить на сервере. При этом их не нужно заключать в 'Неделя', запишите их в файл как есть. В этом случае ваш JavaScript код будет работать.
Я мало знаком с технологией JSON, поэтому прошу дать рекомендацию.
На телефона (android) есть игра, в папке с файлами этой игры есть скрипты с расширениями json. Их можно править и сохранять. Изменения появляются в игрушке. Например, какая-то штучка в игре стоит 100 золотых, я нахожу соответствующий скрипт, 100 правлю на 1, и эта штука в игре уже стоит 1 золотой.
Вопрос мой заключается вот в чём: могут ли мои манипуляции отследить создали игрушки, ну и, как результат, применить ко мне санкции? Я, как писал выше, не очень понимаю как происходит обмен с сервером, ведь файлы игры лежат у меня устройстве.
я новичок JS, буду благодарен за любой совет
.then(response => response.json())
.then(users => {
console.log(users)
})
нужно вытащить website properties, которые закончиваются (.com)
.then(response => response.json())
.then(posts=> {
console.log(posts);
});
1) Получить один object, где key будет id post-а, а как value будет title post-а
2) Получить новый array, где будут входить только те post, у которых body.length больше 50
Задачу №2 так:
.then(response => response.json())
.then(comments=> console.log(comments)); */
/* В коде console.log(comments) печатает массив comment-с։
Каждый comment из себя представляет обьект несколькими propertу։ */
1) Получить массив, где будут только те comments, у которых, сума(+) postId и id property
будут четные цифры:
2) Нам нужно проверить, все ли comment's body property lengths больше 5. Т.е. мы должны иметь одну переменную, которая будет true или false. Если ВСЕ bodies length > 5, то переменная будет true, если хоть одна bodies length < 5, то переменная будет false.
3) Получить новый массив, где будут только email properties. Т.е. должны получить массив где string-ы.
4) Получить 1 object, где keys будут наши postId, а как значение будет массив, где будут bodies ։ Т.е. в конечном итоге должны получить object, который имеет 100 properties (postId-s): Перед каждой property должен быть массив, в котором есть 5 strings (comment.body-s)
.then(response => response.json())
.then(comments=> console.log(comments)); */
/* В коде console.log(comments) печатает массив comment-с։
Каждый comment из себя представляет обьект несколькими propertу։ */
1) Получить массив, где будут только те comments, у которых, сума(+) postId и id property
будут четные цифры:
2) Нам нужно проверить, все ли comment's body property lengths больше 5. Т.е. мы должны иметь одну переменную, которая будет true или false. Если ВСЕ bodies length > 5, то переменная будет true, если хоть одна bodies length < 5, то переменная будет false.
3) Получить новый массив, где будут только email properties. Т.е. должны получить массив где string-ы.
4) Получить 1 object, где keys будут наши postId, а как значение будет массив, где будут bodies ։ Т.е. в конечном итоге должны получить object, который имеет 100 properties (postId-s): Перед каждой property должен быть массив, в котором есть 5 strings (comment.body-s)
Дано:
есть объект
x = {
a: 2345,
b: '123456',
sum: function() {return this.a + this.b}
}
Надо:
1. Сохранить его в JSON вместе с функцией
2. Восстановить объект из JSON.
3. После восстановления x.sum() должен вернуть 125801 (т.е. 2345 + 123456) так, как если бы оба параметра числовые.
Менять типы параметров объекта нельзя.
вопрос: то ли я… то ли лижи не едут,
первое встречное по jS
«Например, структура объекта, которая является валидной с точки зрения JavaScript и не валидной с точки зрения JSON:»
" var person = { name: «Иван»; } // объект JavaScript"
и далее тоже в объектах, внутри перечисление свойств, идет через точку с запятой (; )
это только в начале, а дальше все идет нормально, но… автор проверь внимательно
и покажи разницу эту валидности, что в JS норма, и JSON нет
Огромное спасибо за подробное объяснение! :-)
Вы не могли бы, пожалуйста, на примере объяснить, где в JSON:
1. параметр
2. значение параметра
3. список
4. объект
Спасибо! :-)
Например, пусть имеется следующая JSON строка:
В этом примере она состоит из 3 свойств (параметров): parameterA, parameterB и parameterC.
Значением первого свойства (параметра) является строка: «value of parameterA». Значением второго свойства: объект, состоящий из 2 свойств ({«parameterB1»:«value of parameterB1»,«parameterB2»:«value of parameterB2»}). Значение 3 параметра массив (список): «value of parameterC1»,«value of parameterC2»,«value of parameterC3».
Подскажите пожайлуста можно сделать так, чтобы переходя по ссылке site.com/link — отображался сайт в формате PHP, но если перейти site.com/link/?ajax=1 — отображался с формате JSON? Спасибо.
Это решается на стороне сервера.
Для этого нужно получить GET-параметр AJAX, если он, конечно, существует. Затем если этот параметр равен 1, то вывести JSON, в противном случае HTML страницу.
Вот пример php-файла как это можно выполнить:
В этом случае достаточно просто проверить наличие GET-параметра ajax:
Выдает в консоли ошибку: все проверил, не могу понять что не так
По поводу метода JSON.stringify() мне не совсем понятно, откуда он взялся. Я просмотрел всю библиотеку jQuery, jquery.min, которые содержат JSON, но нашёл только JSON.parse(). Подскажите, пожалуйста, где ещё есть json, чтобы мне знать, какую библиотеку нужно подключать для полноценной работы объекта JSON.
В этой статье приведены только нативные методы JavaScript. Для работы с ними никакие библиотеки подключать не надо, в том числе и jQuery.
Для меня, как изучающего JavaScript и пробующего писать на нём интересные программы, это очень ценная информация.