Json файл пример. JSON для начинающих, с использованием javascript и jQuery
JavaScript позволяет нам не только для добавлять интерактивность веб-страницам, но делает возможным выполнять задачи, которые когда-то принадлежали серверам. JSON обеспечивает простой способ для создания и хранения структурированных данных на JavaScript. JSON очень популярен и является отличной альтернативой XML. JSON (объектная нотация JavaScript), как следует из названия, основан на создании объектов javascript. Объектами JavaScript можно легко манипулировать, разбирать, используя тот же JavaScript.
В отличие от XML, JSON предложения легко составляются как человеком, так и компьютером. Данные в JSON формате можно, например, присвоить переменной (этим мы создаем объект); затем эти данные можно прочитать посредством вновь созданного объекта.
var data={ "firstName" : "Ray" }; alert(data.firstName);
Во-первых, мы создаем переменную для хранения наших данных, и затем мы, используя JSON, определяем объект. Наш объект довольно прост: поле firstName и значение Ray . Строки в JSON обязательно заключать в кавычки. Если вы используете числа, кавычки необязательны.
Данный пример выведет в браузере значение свойства firstName .
Создание объекта placeholder
Давайте создадим более реалистичный пример: вставим наши JSON данные в объект DOM.
var data={"firstName":"Ray"}; document.getElementById("placeholder").innerHTML=data.firstName;
Сейчас мы, вместо вывода предупреждения, помещаем данные внутрь элемента HTML. JSON данные, конечно, могут быть намного сложнее. Давайте попытаемся добавить еще несколько полей.
data={ "firstName":"Ray", "lastName":"Villalobos", "joined":2012 }; document.getElementById("placeholder").innerHTML=data.firstName+" "+data.lastName+" "+data.joined;
Отметьте, что данные JSON, для лучшего понимания, отформатированы определенным образом. Поле "joined" имеет значение 2012, которому не требуются кавычки, так как это число. Давайте рассмотрим что-то более сложное.
Добавляем массивыЧто если мы хотим ввести группу людей...тогда необходимо использовать массивы. Массив в JSON можно создать при помощи квадратных скобок. Давайте посмотрим, как наши данные будут смотреться для нескольких пользователей.
Var data={"users":[ { "firstName":"Ray", "lastName":"Villalobos", "joined":2012 }, { "firstName":"John", "lastName":"Jones", "joined":2010 } ]} document.getElementById("placeholder").innerHTML=data.users.firstName + " " + data.users.lastName+" "+ data.users.joined;
Выглядит немного сложнее, но в действительности не сложно для понимания. Объект JSON создается при помощи фигурных скобок; массив создается при помощи квадратных скобок. Итак, чтобы организовать наши данные, мы создали объект users , в который поместили массив. В массиве располагаются другие объекты. Каждая пара (имя/значение) разделяются запятой.
Обратите внимание, как изменился код для вставки имени. Мы подключили новый объект users и затем при помощи квадратных скобок указали на первый элемент в массиве. Добавим еще один уровень к структуре наших данных.
Var data={"users":[ { "firstName":"Ray", "lastName":"Villalobos", "joined": { "month":"January", "day":12, "year":2012 } }, { "firstName":"John", "lastName":"Jones", "joined": { "month":"April", "day":28, "year":2010 } } ]} document.getElementById("placeholder").innerHTML=data.users.firstName + " " + data.users.lastName+"--"+ data.users.joined.month;
Теперь свойство joined содержит объект с несколькими полями; использовать массив нет необходимости, поэтому мы используем объектную нотацию. Теперь у нас есть данные на нескольких пользователей, пришло время пройтись по каждому пользователю и вывести их в списке.
Реализуем список из пользователей (проходим по объекту JSON)Итак, воспользуемся javascript"ом и создадим список пользователей.
Var data = { "users":[ { "firstName":"Ray", "lastName":"Villalobos", "joined": { "month":"January", "day":12, "year":2012 } }, { "firstName":"John", "lastName":"Jones", "joined": { "month":"April", "day":28, "year":2010 } } ]} var output="
- ";
}
output+="
Для перебора всех свойств объекта существует конструкция for..in :
For(var key in object) { // key - название свойства // object - значение свойства... }
Здесь мы, проходимся по всем элементам массива; сохраняем данные в переменной output и помещаем данные в элемент с id равным placeholder . вы можете сказать, что наши данные строятся немного медленно.
Читаем JSON из внешнего файлаБыло бы неплохо сохранить данные на внешний файл и прочитать их по мере надобности. Я собираюсь использовать библиотеку jQuery и поэтому для начала нам потребуется подключить библиотеку jQuery; затем вызовем функцию getJSON . Вот как выглядит наш код:
JSON Sample $.getJSON("data.json", function(data) { var output="
- ";
for (var i in data.users) {
output+="
- " + data.users[i].firstName + " " + data.users[i].lastName + "--" + data.users[i].joined.month+" "; } output+="
В значительной степени это тот же самый код, но данные выведены наружу. Мы просто обернули все функцией getJSON , которая делает всю тяжелую работу по чтению файла. Файл с данными data.json, предположим, находится в том же каталоге и выглядит следующим образом:
{"users":[ { "firstName":"Ray", "lastName":"Villalobos", "joined": { "month":"January", "day":12, "year":2012 } }, { "firstName":"John", "lastName":"Jones", "joined": { "month":"April", "day":28, "year":2010 } } ]}
Как видите, JSON реально легко читается, и как только вы привыкните в скобкам, вам станет легко кодировать.
В этой статье я хочу рассказать о текстовом формате обмена данными — JSON, а именно — про работу с этим форматом в PHP.
JSON — компактный текстовый формат данных. Может применяться как в интернет-службах передачи данных, так и для хранения информации в структурированном виде.
JSON (англ. JavaScript Object Notation ) — текстовый формат обмена данными, основанный на JavaScript и обычно используемый именно с этим языком. Как и многие другие текстовые форматы, JSON легко читается людьми.
Несмотря на происхождение от JavaScript (точнее, от подмножества языка стандарта ECMA-262 1999 года), формат считается языконезависимым и может использоваться практически с любым языком программирования. Для многих языков существует готовый код для создания и обработки данных в формате JSON.
Практическая польза использования JSON открывается при использовании технологии AJAX . Формат JSON является более кратким и удобочитаемым по сравнению с XML , является «родным» для Javascript. Кроме того, в JSON-код возможна вставка вполне работоспособных функций.
Да, именно в технологии AJAX , на мой взгляд, его основное применение. Так как технология AJAX подразумевает отправку запроса клиентов на сервер. Далее на сервере запрос обрабатывается, и результат отправляется в ответ клиенту.
Вид данных в формате JSONJSON поддерживает все основные форматы данных: строки, числа, булевые значения, а так же массивы и объекты (комбинации ключ: значение, разделенные запятыми и заключающимися в фигурные скобки).
Приведем пример представления данных в формате JSON:
{"id":"1","name":"ivan","country":"Russia","office":["yandex","management"]}
Давайте разберем, что этой строкой можно передать: человек с именем «ivan», под идентификатором «1», проживающий в стране «Russia» работает в компании «yandex» в отделе «management».
Приведем еще один пример. На сайте имеется форма обратной связи, работающая по технологии AJAX . Посетитель заполняет информацию, далее она отправляется на сервер для проверки, если ошибок не найдено, информация сохраняется в базу данных и отправляется ответ об успешном сохранении. Но если найдены ошибки, то возвращается ответ с типами ошибок.
Пример ответа об ошибке в формате JSON:
{"error":"1","errorcode":["empty_pers","empty_mail","empty_phone","empty_letter","empty_scode"]}
Что, к примеру, означает:
- Необходимо заполнить поле «Контактное лицо»
- Необходимо заполнить поле «E-mail»
- Необходимо заполнить поле «Телефон»
- Введите текст сообщения
- Необходимо заполнить поле «Число на картинке»
В случае, если ошибок нет, то возвращается ответ:
{"error":"0"}
Что говорит об успешной отправке данных.
В PHP, для представления данных в формате JSON служит расширение JSON extension . В версиях PHP старше 5.2.0 поддержка JSON встроена в ядро, в более ранних версиях необходимо подключать к вашему скрипту дополнительный файл с функциями.
Итак в PHP, за работу с данными в формате JSON отвечают две функции: json_encode() и json_decode() .
Конвертация данных в формат JSON $json_data = array ("id"=>1,"name"=>"ivan","country"=>"Russia","office"=>array("yandex"," management")); echo json_encode($json_data); Обратное преобразование данных из формата JSON $json_string="{"id":1,"name":"ivan","country":"Russia","office":["yandex"," management"]} "; $obj=json_decode($json_string);Теперь в $obj будут содержаться JSON данные переведенные в PHP-объект, доступ к которым вы сможете получить следующим образом:
Echo $obj->name; //Отобразит имя ivan echo $obj->office; //Отобразит компанию yandex
Как видите, $obj->office является массивом.
Foreach($obj->office as $val) echo $val;
Работа с JSON позволяет обмениваться с сервером данными в «чистом виде» . Полностью отпадает необходимость пересылать громоздкие куски HTML кода.
JSON является частью стандарта ECMAScript начиная с 1999 года, когда ECMA определила функцию eval() воспринимающую формат. Он стал набирать популярность вместе с нарастающим успехом Ajax. Слово JSON часто появляется когда кто-нибудь заводит речь об Ajax. Известно, что JSON является другим форматом данных, что он замещает XML, и что многие программисты активно поддерживают его. Но что такое в действительности JSON и в чем его преимущества?
Почему JSON?Преимущество JSON заключается в том, что он распознается в JavaScript. Нет необходимости разбирать документ, как это происходит с XML, для передачи данных через интернет.
JSON и XMLПреимущества JSON:
- Простой для чтения и понимания.
- Простой для использования.
Преимущества XML:
- Имеет возможности расширения
И XML и JSON имеют возможность интегрировать большой объем данных в бинарной форме.
Синтаксис JSONКомпоненты JSON:
- Объекты: содержат объекты или атрибуты.
- Скалярные переменные: число, строка, логическая переменная.
- Массив.
- Литеральные значения: null , true , false , "строка символов ", и числовые значения.
Содержит элемент или список элементов, где каждый элемент описывается следующим образом:
"имя" : "значение"
Синтаксис объекта:
{ элемент, элемент, .... }
МассивНабор значений, разделенных запятой.
[ значение, значение, ....]
ЗначениеЗначение может быть: объектом, массивом, литеральным значением (строка, число, true , false , null ).
Для создания JSON файла больше ничего не нужно!
Пример JSON файлаПростой пример структура меню. В данном объекте содержатся атрибуты и массив, который включает другие объекты строки меню.
{ "menu": "Файл", "commands": [ { "title": "Новый", "action":"CreateDoc" }, { "title": "Открыть", "action": "OpenDoc" }, { "title": "Закрыть", "action": "CloseDoc" } ] } Эквивалент на XML: Файл Новый CreateDoc Открыть OpenDoc Закрыть CloseDoc
Как использовать форматФайл JSON позволяет загружать данные с сервера или на сервер. Например, сохранение содержимого формы, которая была только что заполнена пользователем. Процесс включает три фазы: обработку браузером, обработку сервером, и обмен данными между ними.
Клиентская часть (браузер)Данная часть выполняется достаточно просто, так как JSON является частью определения JavaScript. Содержимое файла или определяющих данных назначается переменным и они становятся объектами программы.
Серверная частьФайл JSON используется различными программными языками, включая PHP и Java , благодаря наличию парсеров, которые позволяют получать содержимое и даже конвертировать его в классы и атрибуты языка. На сайте JSON можно найти парсеры для многих языков программирования.
Обмен данными- с использованием XMLHttpRequest.
Файл JSON обрабатывается функцией JavaScript eval() . Отправка файла на сервер может быть выполнена с помощью XMLHttpRequest . Файл отправляется как текстовый и обрабатывается парсером языка программирования, который используется на сервере.
ПримерКод XMLHttpRequest:
Var req = new XMLHttpRequest(); req.open("GET", "file.json", true); req.onreadystatechange = myCode; // обработчик req.send(null);
Обработчик JavaScript:
Function myCode() { if (req.readyState == 4) { var doc = eval("(" + req.responseText + ")"); } } Использование данных: var menuName = document.getElementById("jsmenu"); // ищем поле menuName.value = doc.menu.value; // назначаем значение полю Как получать данные: doc.commands.title // читаем значение поля "title" в массиве doc.commands.action // читаем значение поля "action" в массиве
Знакомые с программированием люди сразу узнают файлы с расширением JSON. Этот формат – аббревиатура терминов JavaScript Object Notation, и является он по сути текстовым вариантом обмена данными, использующемся в языке программирования JavaScript. Соответственно, справиться с открытием таких файлов поможет либо специализированное ПО, либо текстовые редакторы.
Основной особенностью скриптов в формате JSON является взаимозаменяемость его на формат XML. Оба типа представляют собой текстовые документы, которые можно открывать текстовыми процессорами. Однако начнем мы со специализированного ПО.
Способ 1: Altova XMLSpyДостаточно известная среда разработки, которую используют в том числе и веб-программисты. Эта среда также генерирует файлы JSON, следовательно способна и открывать сторонние документы с таким расширением.
Недостатков у данного ПО два. Первый – платная основа распространения. Пробная версия активна 30 дней, однако для её получения необходимо указать имя и почтовый ящик. Второй – общая громоздкость: человеку, которому просто нужно открыть файл, она может показаться чересчур навороченной.
Способ 2: Notepad++Многофункциональный текстовый редактор — первый из списка подходящих для открытия скриптов в формате JSON.
Плюсов у Notepad++ изрядно – тут и отображение синтаксиса многих языков программирования, и поддержка плагинов, и малый размер… Однако в силу некоторых особенностей работает программа неторопливо, особенно если открыть в ней объемный документ.
Способ 3: AkelPadНевероятно простой и в то же время богатый на возможности текстовый редактор от российского разработчика. В число поддерживаемых им форматов входит и JSON.
Как и Notepad++, этот вариант блокнота также бесплатен и поддерживает плагины. Он работает шустрее, однако большие и сложные файлы может не открыть с первого раза, так что имейте в виду такую особенность.
Способ 4: Komodo EditБесплатное ПО для написания программного кода от компании Komodo. Отличается современным интерфейсом и широкой поддержкой функций для программистов.
В программе, к сожалению, отсутствует русский язык. Однако рядового пользователя скорее отпугнет избыточный функционал и непонятные элементы интерфейса – все-таки этот редактор ориентирован в первую очередь на программистов.
Способ 5: Sublime TextЕще один представитель code-oriented текстовых редакторов. Интерфейс проще, чем у коллег, однако возможности те же. Доступна и портативная версия приложения.
К сожалению, Sublime Text недоступен на русском языке. Недостатком можно назвать и условно-бесплатную модель распространения: свободная версия ничем не ограничена, но время от времени появляется напоминание о необходимости покупки лицензии.
Способ 6: NFOPadПростой блокнот, однако для просмотра документов с расширением JSON тоже подойдет.
NFOPad подходит для просмотра JSON-документов, однако есть нюанс – при открытии некоторых из них программа намертво зависает. С чем связана такая особенность – неизвестно, но будьте внимательны.
Способ 7: БлокнотИ наконец, стандартный текстовый процессор, встроенный в ОС Windows, также способен открывать файлы с расширением JSON.
В завершение скажем следующее: файлы с расширением JSON – обычные текстовые документы, которые могут обрабатывать не только описанные в статье программы, а и куча других, в том числе и его бесплатные аналоги и . Высокая вероятность того, что с такими файлами смогут справиться и .
JSON (JavaScript Object Notation) – это формат передачи данных. Из названия видно, что формат основан на языке программирования JavaScript, однако он доступен и в других языках (Python, Ruby, PHP, Java).
JSON использует расширение.json. При использовании его в других файловых форматах (например, .html) строка JSON берётся в кавычки или присваивается переменной. Этот формат легко передаётся между веб-сервером и клиентом или браузером.
Легковесный и простой для восприятия JSON – отличная альтернатива XML.
Данное руководство ознакомит вас с преимуществами, объектами, общей структурой и синтаксисом JSON.
Синтаксис и структура JSONОбъект JSON имеет вид «ключ-значение» и обычно записывается в фигурных скобках. При работе с JSON все объекты хранятся в файле.json, но также они могут существовать как отдельные объекты в контексте программы.
Объект JSON выглядит так:
"first_name" : "John",
"last_name" : "Smith",
"location" : "London",
"online" : true,
"followers" : 987
Это очень простой пример. Объект JSON может содержать множество строк.
Как видите, объект состоит из пар «ключ-значение», которые заключены в фигурные скобки. Большая часть данных в JSON записывается в виде объектов.
Между ключом и значением ставится двоеточие. После каждой пары нужно поставить запятую. В результате получается:
"key" : "value", "key" : "value", "key": "value"
Ключ в JSON находится слева. Ключ нужно помещать в двойные кавычки. В качестве ключа можно использовать любую валидную строку. В рамках одного объекта все ключи должны быть уникальны. Ключ может содержать пробел («first name»), но при программировании могут возникнуть проблемы с доступом к такому ключу. Потому вместо пробела лучше использовать подчеркивание («first_name»).
Значения JSON находятся в правой части столбца. В качестве значения можно использовать любой простой тип данных:
- Строки
- Числа
- Объекты
- Массивы
- Логические данные (true или false)
Значения могут быть представлены и сложными типами данных (например, объектами или массивами JSON).
JSON поддерживает индивидуальный синтаксис каждого из перечисленных выше типов данных: если значение представлено строкой, то оно будет взято в кавычки, а если числом, то нет.
Как правило, данные в файлах.json записываются в столбик, однако JSON можно записать и в строку:
{ "first_name" : "John", "last_name": "Smith", "online" : true, }
Так обычно записываются данные JSON в файлы другого типа.
Записывая данные JSON в столбец, вы повышаете удобочитаемость файла (особенно если данных в файле много). JSON игнорирует пробелы между столбцами, потому с их помощью вы можете разделить данные на удобное для восприятия количество столбцов.
"first_name" : "John",
"last_name" : "Smith",
"online" : true
Обратите внимание: объекты JSON очень похожи на объекты JavaScript, но это не один и тот же формат. К примеру, в JavaScript можно использовать функции, а в JSON нельзя.
Главным преимуществом JSON является то, что данные в этом формате поддерживают многие популярные языки программирования, потому их можно быстро передать.
Теперь вы знакомы с базовым синтаксисом JSON. Но файлы JSON могут иметь сложную, иерархическую структуру, включающую в себя вложенные массивы и объекты.
Сложные типы в JSONJSON может хранить вложенные объекты и массивы, которые будут передаваться в качестве значения присвоенного им ключа.
Вложенные объектыНиже вы найдёте пример – файл users.json, в котором содержатся данные о пользователях. Для каждого пользователя
(«john», «jesse», «drew», «jamie») в качестве значения передаётся вложенный объект, который, в свою очередь, тоже состоит из ключей и значений.
Примечание : Первый вложенный объект JSON выделен красным.
" john" : {
"username" : " John",
"location" : "London",
"online" : true,
"followers" : 987
"jesse" : {
"username" : "Jesse",
"location" : "Washington",
"online" : false,
"followers" : 432
"drew" : {
"username" : "Drew",
"location" : "Paris",
"online" : false,
"followers" : 321
"jamie" : {
"username" : "Jamie",
"location" : "Berlin",
"online" : true,
"followers" : 654
Обратите внимание: фигурные скобки используются и во вложенном, и в основном объекте. Запятые во вложенных объектах используются так же, как и в обычных.
Вложенные массивыДанные можно вкладывать в JSON с помощью массивов JavaScript, которые будут передаваться как значения. В JavaScript в начале и в конце массива используются квадратные скобки (). Массив – это упорядоченный набор данных, который может содержать данные различных типов.
Массив используют для передачи большого количества данных, которые можно сгруппировать. Для примера попробуем записать данные о пользователе.
{
"first_name" : "John",
"last_name" : "Smith",
"location" : "London",
"websites" : [
"description" : "work",
"URL" : "https://www.johnsmithsite.com/"
},
{
"desciption" : "tutorials",
"URL" : "https://www.johnsmithsite.com/tutorials"
"social_media" : [
"description" : "twitter",
"link" : "https://twitter.com/johnsmith"
"description" : "facebook",
"link" : "https://www.facebook.com/johnsmith"
"description" : "github",
"link" : "https://github.com/johnsmith"
Ключам «websites» и «social_media» в качестве значений присвоены массивы, которые помещаются в квадратные скобки.
При помощи вложенных массивов и объектов можно создать сложную иерархию данных.
JSON или XML?XML (eXtensible Markup Language) позволяет хранить данные в удобном для восприятия человека и машины виде. Формат XML поддерживается большим количеством языков программирования.
У XML и JSON очень много общего. Однако XML требует гораздо больше текста, следовательно, такие файлы объёмнее и их сложнее читать и писать. Более того, XML обрабатывается только с помощью интерпретатора XML, а JSON можно обработать с помощью простой функции. В отличие от JSON, XML не может хранить массивы.
Давайте сравним два файла: они содержат одинаковые данные, но первый написан в формате XML, а второй в JSON.
users.xml
John London
Jesse Washington
Drew Paris
Jamie Berlin
users.json
{"users": [
{"username" : "John", "location" : "London"},
{"username" : "Jesse", "location" : "Washington"},
{"username" : "Drew", "location" : "Paris"},
{"username" : "JamieMantisShrimp", "location" : "Berlin"}
JSON – очень компактный формат, и он не требует такого количества тегов, как XML. Кроме того, XML, в отличие от JSON, не поддерживает массивы.
Если вы знакомы с HTML, вы заметили, что формат XML очень похож на него (в частности тегами). JSON проще, требует меньше текста и его проще использовать, например, в приложениях AJAX.
Конечно, формат нужно выбирать в зависимости от потребностей приложения.
Инструменты для JSONJSON обычно используется в JavaScript, однако этот формат широко применяется в других языках программирования.
Больше информации о совместимости и обработке JSON можно найти на сайте проекта и в библиотеке jQuery .
Писать JSON с нуля приходится редко. Обычно данные загружаются из исходников или преобразовываются в JSON. Вы можете преобразовать CSV или данные с разделителями табуляцией в JSON с помощью открытого инструмента Mr. Data Converter . Чтобы преобразовать XML в JSON и наоборот, используйте utilities-online.info . При работе с автоматическими инструментами обязательно проверяйте результат.
Файлы JSON (в том числе и преобразованные данные) можно проверить с помощью сервиса JSONLint . Чтобы протестировать JSON в контексте веб-разработки, обратитесь к JSFiddle .
ЗаключениеJSON – простой и легковесный формат данных. Файлы JSON легко передавать, хранить и использовать.
Сегодня JSON часто используется в API.