Домой / Работа в Интернете / Формат json используется для работы с. Формат JSON: пример и описание. Синтаксис JSON на примерах

Формат json используется для работы с. Формат JSON: пример и описание. Синтаксис JSON на примерах

27.10.2019 Работа в Интернете

Для работы с форматом JSON в JavaScript есть глобальный объект JSON. У объекта JSON есть два метода: stringify() и parse() . Кроме этих двух методов он не содержит больше никакой дополнительной функциональности.

Метод stringify()

Метод stringify() преобразует значение JavaScript в строку JSON.

Особенности преобразования:

  • Значение undefined , функция или значение типа symbol , встреченные во время преобразования, будут либо опущены (если они найдены в объекте), либо превращены в null (если они найдены в массиве).
  • Члены прототипа и неперечислимые свойства игнорируются.
Синтаксис JSON.stringify(value[, replacer[, space]]) Параметры value Значение, которое будет преобразовано в строку JSON. replacer (необязательный) Значением параметра может быть функция, массив или null .
  • Массив определяет набор свойств объекта, которые будут включены в JSON-строку. В качестве значений массива указываются строки, соответствующие именам свойств преобразуемого объекта.
  • Функция позволяет заменить значения свойств объекта в JSON-строке. Функция должна содержать два параметра: имя свойства и значение свойства. Имя свойства является строкой. Функция должна возвращать новое значение свойства.
  • Если значением параметра является null , то JSON-строка будет включать все свойства объекта.
space (необязательный) Делает JSON-строку более удобочитаемой, добавляя отступы для каждого уровня вложенности. Значением параметра может быть строка или число.
  • Число указывает количество пробелов, используемых в качестве отступа для каждого уровня вложенности. Каждый последующий уровень вложенности дополняется новыми отступами. Например, если в качестве значения параметра используется число 2, то на первом уровне вложенности отступ будет составлять два пробела, на последующем уровне вложенности отступ будет составлять 4 пробела и т. д. Максимальное количество пробелов, которое можно указать - 10. Если указать большее число, оно автоматически уменьшится до 10.
  • Строка определяет символ, используемый в качестве отступа для каждого уровня вложенности. Длина строки ограничена 10 символами, если указать строку длиннее, она обрезается до 10 символов. Использование строки также позволяет использовать табуляцию ("\t") в качестве отступа. Каждый последующий уровень вложенности дополняется новыми символами отступа. Например, если в качестве значения параметра указан символ - (дефис), то на первом уровне вложенности в качестве отступа будет использоваться один дефис, на последующем уровне вложенности будет использоваться 2 дефиса и т. д.
Возвращаемое значение

JSON-строка.

Пример let person = { name: "Гомэр", age: 40, work: { place: "Атомная станция", location: "Спрингфилд" } } // Пример с одним параметром console.log(JSON.stringify(person)); // "{"name":"Гомэр","age":40,"work":{"place":"Атомная станция","location":"Спрингфилд"}}" // Пример с двумя параметрами (массив) console.log(JSON.stringify(person, ["name", "age"])); // "{"name":"Гомэр","age":40}" // Пример с двумя параметрами (функция) console.log(JSON.stringify(person, function (key, value) { switch (key) { case "name": return "Барт"; case "age": return 10; case "work": return undefined; default: return value; } })); // "{"name":"Барт","age":10}" // Пример с тремя параметрами console.log(JSON.stringify(person, null, 2)); /* { * "name": "Гомэр", * "age": 40, * "work": { * "place": "Атомная станция", * "location": "Спрингфилд" * } * } */ Метод parse()

Метод parse() преобразует строку JSON в соответствующее значение JavaScript.

Особенности преобразования:

  • Если во время преобразования в строке JSON встретиться значение undefined , то оно будет опущено (не будет включено в результат).
Синтаксис JSON.parse(text[, reviver]) Параметры text JSON-строка, которая будет преобразована в соответствующее значение JavaScript. reviver (необязательный) Значением параметра должна быть функция. Функция позволяет заменить значение свойства JSON-строки перед его возвратом. Функция должна содержать два параметра: имя свойства и значение свойства. Имя свойства является строкой. Функция должна возвращать новое значение свойства. Возвращаемое значение

Соответствующее значение JavaScript (примитивное значение, объект или массив).

Пример JSON.parse("{}"); // {} JSON.parse("true"); // true JSON.parse(""); // JSON.parse("null"); // null

Что такое JSON и на что он способен? В этой статье вы узнаете, как использовать JSON для легкой работы с данными. Так же мы рассмотрим, как работать с JSON используя при этом PHP и JavaScript.

Если вы разрабатывали вебсайты или веб-приложения в целом, вероятней всего вы слышали о JSON, по крайней мере, мимолетом. Но, что конкретно значит JSON? Что может делать этот формат данных и как им пользоваться?

В этой статье мы узнаете основы работы с json форматом. Мы будем следовать следующим темам:

  • Что такое JSON формат?
  • Как создавать JSON строки?
  • Простой пример JSON данных
  • Сравнение JSON с XML

Давайте начнем!

Что такое JSON формат?

JSON - это простой, основанный на тексте, способ сохранять и передавать структурированные данные. С помощью простого синтаксиса вы можете легко сохранять как простые цифры и строки, так и массивы, объекты, используя при этом не что иное как текст. Так же можно связывать объекты и массивы, что позволяет создавать сложные структуры данных.

После создания JSON строки, ее легко можно пересылать в любое приложение или компьютер, так как это всего лишь текст.

JSON имеет много преимуществ:

  • Он компактный
  • Он понятен для людей и легко считывается компьютером
  • Его легко можно преобразовать в программные форматы: числовые значения, строки, булевой формат, нулевое значение, массивы и ассоциативные массивы.
  • Почти все программные языки имеют функции, позволяющие считывать и создавать json формат данных.

Буквально, аббревиатура JSON означает - JavaScript Object Notation. Как описано ранее, этот формат основан на создании объектов, что-то подобное к ассоциативным массивам в других языках программирования.

Для каких целей используется JSON?

Более всего, json используется для обмена данными между javascript и серверной стороной (php). Другими словами, для технологии ajax. Это очень удобно, когда вы передаете несколько переменных или целые массивы данных.

Как это выглядит на примере:

  • Пользователь кликает по превьюшке картинки
  • JavaScript обрабатывает это событие и посылает ajax запрос к PHP скрипту, передавая ID картинки.
  • На сервере, php получает описание картинки, имя картинки, адрес к большому изображению и другую информацию из базы данных. Получив, преобразовывает в JSON формат и отправляет обратно на страницу пользователя.
  • JavaScript получает ответ в виде JSON, обрабатывает данные, формирует html код и выводит увеличенное изображение с описанием и другой информацией.

    • Так происходит увеличение картинки, без перезагрузки страницы в браузере. Это очень удобно, когда нам необходимо получить частичные данные, или передать небольшой объем информации на сервер.

    Всеми любимый jQuery, имеет функции getJSON() и parseJSON(), которые помогают работать с форматом через ajax запросы.

    Как создавать JSON строки?


    Ниже предоставлены основные правила создания JSON строк:

    • JSON строка содержит как массив значений, так и объект (ассоциативный массив с парами имя/значение).
    • Массив должен быть обвернут в квадратные скобки, [ и ], может содержать список значений, которые отделяются через кому.
    • Объекты обворачиваются с помощью фигурных дужек, { и }, также содержат разделенные комой пары имя/значение.
    • Пары имя/значение состоят из имя поля (в двойных кавычках), после чего следует двоиточие (:) , после значение данного поля.
    • Значения в массиве или объекте могут быть:
      • Числовые (целые или дробные с точкой)
      • Строковые (обвернутые в двойные кавычки)
      • Логические (true или false)
      • Другие массивы (обвернутые в квадратные скобки [ и ])
      • Другие объекты (обвернутые в фигурные дужки { и })
      • Нулевое значение (null)

    Важно! Если вы используете двойные кавычки в значениях, экранируйте их с помощью обратного слеша: \". Также можно использовать hex закодированные символы, так как вы это делаете в других программных языках.

    Простой пример JSON данных

    Следующий пример показывает, как можно сохранять данные в «корзине» интернет магазина с помощью JSON формата:

    { "orderID": 12345, "shopperName": "John Smith", "shopperEmail": "[email protected]", "contents": [ { "productID": 34, "productName": "SuperWidget", "quantity": 1 }, { "productID": 56, "productName": "WonderWidget", "quantity": 3 } ], "orderCompleted": true }

    Давайте разберем эти данные по частям:

  • В начале и конце мы использует фигурные дужки { и }, которые дают понять, что это объект.
  • Внутри объекта мы имеем несколько пар имя/значение:
  • "orderID": 12345 - поле с именем orderId и значение 12345
  • "shopperName": "John Smith" - поле с именем shopperName и значение John Smith
  • " shopperEmail": " johnsmith@ example. com" - подобно, как и в предыдущем поле, здесь храниться email покупателя.
  • "contents": [ ... ] - поле с именем content, значение которого массив.
  • "orderCompleted": true - поле с именем orderCompleted, значение которого true
  • Внутри массива contents, мы имеем два объекта, которые отображают содержимое корзины. Каждый объект продукта имеет три свойства: productID, productName, quantity.

    • На последок, так как JSON идентичен с объектами в JavaScript, вы легко можете взять этот пример и создать из него JavaScript объект:

    var cart = { "orderID": 12345, "shopperName": "John Smith", "shopperEmail": "[email protected]", "contents": [ { "productID": 34, "productName": "SuperWidget", "quantity": 1 }, { "productID": 56, "productName": "WonderWidget", "quantity": 3 } ], "orderCompleted": true };

    Сравнение JSON с XML

    В большинстве случаев, вы будете думать о JSON как альтернативе XML формату - по крайней мере в рамках веб приложений. Концепция Ajax, в оригинале использует XML для обмена данными между сервером и браузером, но в последние годы JSON стал более популярным для передачи ajax данных.

    Хотя XML это испытанная и хорошо тестированная технология которой пользуются множество приложений, преимущества JSON формата в том, что он более компактный и более прост в написании и чтении.

    Вот вышеописанный JSON пример, только переписанный в XML формате:

    orderID 12345 shopperName John Smith shopperEmail [email protected] contents productID 34 productName SuperWidget quantity 1 productID 56 productName WonderWidget quantity 3 orderCompleted true

    Как видите в несколько раз длиннее нежели JSON. По факту, этот пример длинной 1128 символов, в то время, как JSON версия всего лишь 323 символа. Также XML версию сложнее читать.

    Естественно, нельзя судить только по одному примеру, но даже небольшие объемы информации занимают меньше места в JSON формате, нежели в XML.

    Как работать с JSON через PHP и JS?

    Вот мы и подошли к самому интересному - практической стороне JSON формата. Сначала отдадим дань JavaScript’у, после посмотрим, как можно манипулировать с JSON через PHP.

    Создание и чтение JSON формата с помощью JavaScript


    Несмотря на то, что JSON формат прост, его сложно писать вручную при разработке веб приложений. Более того, часто приходится конвертировать JSON строки в переменные, после чего использовать их в своем коде.

    К счастью, многие языки программирования предоставляют инструменты для работы с JSON строками. Основная идея которых:

    Создание JSON строк, вы начинаете с переменных содержащих некие значения, после пропускаете их через функцию, превращающую данные в JSON строку.

    Чтение JSON строк, вы начинаете с JSON строки содержащей определенные данные, пропускаете строку через функцию, которая создает переменные содержащие данные.

    Давайте посмотрим, как это делается в JavaScript.

    Создаем JSON строку из JavaScript переменной

    JavaScript имеет встроенный метод, JSON.stringify(), который принимает переменную javascript и возвращает json строку репрезентируя содержимое переменной. Для примера, воспользуемся ранее созданным объектом, сконвертируем его в JSON строку.

    var cart = { "orderID": 12345, "shopperName": "John Smith", "shopperEmail": "[email protected]", "contents": [ { "productID": 34, "productName": "SuperWidget", "quantity": 1 }, { "productID": 56, "productName": "WonderWidget", "quantity": 3 } ], "orderCompleted": true }; alert (JSON.stringify(cart));

    Вот что выведется на экран:

    {"orderID":12345,"shopperName":"John Smith","shopperEmail":"[email protected]", "contents":[{"productID":34,"productName":"SuperWidget","quantity":1}, {"productID":56,"productName":"WonderWidget","quantity":3}], "orderCompleted":true}

    Заметьте, что JSON.stringify() выводит JSON строки без пробелов. Сложно читать, но так более компактно, что важно при пересылке данных.

    Создаем JavaScript переменную из JSON строки

    Существует несколько способов парсинга JSON строк, наиболее приемлем и безопасный используя JSON.parse() метод. Он принимает JSON строку и возвращает JavaScript объект или массив содержащий данные JSON. Вот пример:

    var jsonString = " \ { \ "orderID": 12345, \ "shopperName": "John Smith", \ "shopperEmail": "[email protected]", \ "contents": [ \ { \ "productID": 34, \ "productName": "SuperWidget", \ "quantity": 1 \ }, \ { \ "productID": 56, \ "productName": "WonderWidget", \ "quantity": 3 \ } \ ], \ "orderCompleted": true \ } \ "; var cart = JSON.parse (jsonString); alert (cart.shopperEmail); alert (cart.contents.productName);

    Здесь мы создавали переменную, jsonString, которая содержит JSON строку из ранее предоставленных примеров. После чего пропускали эту строку через JSON.parse() для создания объекта содержащего JSON данные, которые хранятся в cart переменной. На конец, мы проверяем наличие данных и выводим некоторую информацию средствами модального окна alert.

    Выведется следующая информация:

    В реальном веб приложении, ваш JavaScript код должен принимать JSON строку как ответ от сервера (после посылки AJAX запроса), после чего парсите строку и выводите данные о содержимом корзины пользователю.

    Создание и чтение JSON формата с помощью PHP


    PHP, подобно JavaScript’у, имеет функции позволяющие конвертировать переменные в JSON формат, и наоборот. Давайте рассмотрим их.

    Создание JSON строки из PHP переменной

    Json_encode() принимает PHP переменную и возвращает JSON строку, репрезентируя данные переменной. Вот наш пример «корзины» написанный на PHP:

    Этот код выводит в точности такой результат, как и JavaScript пример - валидную JSON строку репрезентирующую содержимое переменных:

    {"orderID":12345,"shopperName":"John Smith","shopperEmail":"[email protected]","contents":[{"productID":34,"productName":"SuperWidget","quantity":1},{"productID":56,"productName":"WonderWidget","quantity":3}],"orderCompleted":true}

    В реалии, ваш PHP скрипт должен посылать JSON строку как ответ на AJAX запрос, где JavaScript будет использовать JSON.parse() для превращения строки в переменные.

    В функции json_encode() можно указывать дополнительные параметры, позволяющие конвертировать некоторые символы в hex.

    Создание PHP переменной из JSON строки

    Аналогично к вышеописанному, существует функция json_decode(), позволяющая декодировать JSON строки и помещать содержимое в переменные.

    Как и в случае с JavaScript, этот код выведет следующее:

    [email protected] WonderWidget

    По умолчанию, json_decode() возвращает JSON объекты как PHP объекты. Подобно привычному синтаксису, мы используем -> для доступа к свойствам объекта.

    Если в дальнейшем вы захотите использовать данные в виде ассоциативного массива, просто передайте вторым параметров true в функции json_decode(). Вот пример:

    $cart = json_decode($jsonString, true); echo $cart["shopperEmail"] . "
    "; echo $cart["contents"]["productName"] . "
    ";

    Это выводит тот же результат:

    [email protected] WonderWidget

    Также в функцию json_decode() можно передавать дополнительные аргументы, для определения обработки больших чисел и рекурсии.

    В заключение о JSON формате

    Если вы собрались создавать веб приложение использующее технологию Ajax, несомненно воспользуйтесь форматом JSON для обмена данными между сервером и браузером.


    Обозначение объектов JavaScript (JSON) - стандартный текстовый формат для представления структурированных данных на основе синтаксиса объекта JavaScript. Он обычно используется для передачи данных в веб-приложениях (например, отправка некоторых данных с сервера на клиент, поэтому их можно отображать на веб-странице или наоборот). Вы столкнетесь с этим довольно часто, поэтому в этой статье мы даем вам все, что вам нужно для работы с JSON, используя JavaScript, включая разбор JSON, чтобы вы могли получить доступ к данным внутри него и создавать JSON.

    Нет, действительно, что такое JSON?

    Мы собираемся загрузить его на нашу страницу и использовать некоторые изящные манипуляции DOM, чтобы отобразить их, например:

    Получение JSON

    Чтобы получить JSON, мы будем использовать API, называемый XMLHttpRequest (часто называемый XHR ). Это очень полезный объект JavaScript, который позволяет нам делать сетевые запросы для извлечения ресурсов с сервера через JavaScript (например, изображения, текст, JSON, даже фрагменты HTML), что означает, что мы можем обновлять небольшие разделы контента без необходимости перезагрузки всей страницы. Это привело к более отзывчивым веб-страницам и звучит захватывающе, но, к сожалению, выходит за рамки этой статьи, чтобы учить его гораздо более подробно.

  • Начнем с того, что мы собираемся сохранить URL-адрес JSON, который мы хотим получить в переменной. Добавьте нижеследующий код JavaScript: var requestURL = "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
  • Чтобы создать запрос, нам нужно создать новый экземпляр объекта запроса из конструктора XMLHttpRequest , используя ключевое слово new . Добавьте следующую ниже свою последнюю строку: var request = new XMLHttpRequest();
  • Теперь нам нужно открыть новый запрос, используя метод . Добавьте следующую строку: request.open("GET", requestURL);

    Это занимает не менее двух параметров - есть другие доступные параметры. Нам нужен только два обязательных для этого простого примера:

    • Метод HTTP, который следует использовать при выполнении сетевого запроса. В этом случае прекрасен, так как мы просто извлекаем некоторые простые данные.
    • URL-адрес для запроса - это URL-адрес файла JSON, который мы сохранили ранее.
  • Затем добавьте следующие две строки: здесь мы устанавливаем в JSON, так что XHR знает, что сервер будет возвращать JSON и что это должно быть преобразовано за кулисами в объект JavaScript. Затем мы отправляем запрос методом : request.responseType = "json"; request.send();
  • Последний бит этого раздела предполагает ожидание ответа на возврат с сервера, а затем обращение с ним. Добавьте следующий код ниже вашего предыдущего кода: request.onload = function() { var superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); }

    • Здесь мы сохраняем ответ на наш запрос (доступный в свойстве ) в переменной superHeroes ; эта переменная теперь будет содержать объект JavaScript, основанный на JSON! Затем мы передаем этот объект двум вызовам функций - первый из них заполнит правильными данными, а второй создаст информационную карту для каждого героя в команде и вставляет ее в .

    Мы завернули код в обработчике событий, который запускается, когда событие загрузки запускается в объекте запроса (см. ) - это связано с тем, что событие загрузки запускается, когда ответ успешно возвращается; делая это таким образом, гарантирует, что request.response определенно будет доступен, когда мы приступим, чтобы попытаться что-то с этим сделать.

    Заполнение заголовка

    Теперь мы извлекли данные JSON и превратили его в объект JavaScript, давайте воспользуемся им, написав две функции, на которые мы ссылались выше. Прежде всего, добавьте следующее определение функции ниже предыдущего кода:

    Function populateHeader(jsonObj) { var myH1 = document.createElement("h1"); myH1.textContent = jsonObj["squadName"]; header.appendChild(myH1); var myPara = document.createElement("p"); myPara.textContent = "Hometown: " + jsonObj["homeTown"] + " // Formed: " + jsonObj["formed"]; header.appendChild(myPara); }

    Мы назвали параметр jsonObj , чтобы напомнить себе, что этот объект JavaScript возник из JSON. Здесь мы сначала создаем элемент с , устанавливаем его равным свойству squadName объекта, а затем добавляем его в заголовок с помощью . Затем мы выполняем очень похожую операцию с абзацем: создаем его, устанавливаем его текстовое содержимое и добавляем его в заголовок. Единственное различие заключается в том, что его текст задан как конкатенированная строка, содержащая как homeTown , так и formed свойства объекта.

    Создание информационных карт героя

    Затем добавьте следующую функцию внизу кода, которая создает и отображает карты супергероев:

    Function showHeroes(jsonObj) { var heroes = jsonObj["members"]; for (var i = 0; i < heroes.length; i++) { var myArticle = document.createElement("article"); var myH2 = document.createElement("h2"); var myPara1 = document.createElement("p"); var myPara2 = document.createElement("p"); var myPara3 = document.createElement("p"); var myList = document.createElement("ul"); myH2.textContent = heroes[i].name; myPara1.textContent = "Secret identity: " + heroes[i].secretIdentity; myPara2.textContent = "Age: " + heroes[i].age; myPara3.textContent = "Superpowers:"; var superPowers = heroes[i].powers; for (var j = 0; j < superPowers.length; j++) { var listItem = document.createElement("li"); listItem.textContent = superPowers[j]; myList.appendChild(listItem); } myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); section.appendChild(myArticle); } }

    Для начала сохраним свойство members объекта JavaScript в новой переменной. Этот массив содержит несколько объектов, которые содержат информацию для каждого героя.

    Затем мы используем для циклического прохождения каждого объекта в массиве. Для каждого из них мы:

  • Создаем несколько новых элементов: , , три

    И

      .
    • Установливаем , чтобы содержать name текущего героя.
    • Заполняем три абзаца своей secretIdentity , age и строкой, в которой говорится: «Суперспособности:», чтобы ввести информацию в список.
    • Сохраняем свойство powers в другой новой переменной под названием superPowers - это содержит массив, в котором перечислены сверхспособности текущего героя.
    • Используем другой цикл for , чтобы прокрутить сверхспособности текущего героя - для каждого из них мы создаем элемент
    • , помещаем в него сверхспособности, а затем помещаем listItem внутри элемента
        (myList) с помощью appendChild() .
      • Последнее, что мы делаем, это добавить ,

        И

          внутри (myArticle), а затем добавляем в . Важное значение имеет порядок, в котором добавляются вещи, так как это порядок, который они будут отображать внутри HTML.

          Примечание . Если у вас возникли проблемы после нотации точек / скобок, которые мы используем для доступа к объекту JavaScript, это может помочь открыть файл superheroes.json на другой вкладке или в текстовом редакторе и обратиться к ней, когда вы смотрите на наш JavaScript. Вы также можете обратиться к нашей статье для получения дополнительной информации о нотации точек и скобок.

          Преобразование между объектами и текстом

          Вышеприведенный пример был прост с точки зрения доступа к объекту JavaScript, потому что мы задали XHR-запрос для прямого преобразования ответа JSON в объект JavaScript, используя.

          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 могут иметь сложную, иерархическую структуру, включающую в себя вложенные массивы и объекты.

          Сложные типы в JSON

          JSON может хранить вложенные объекты и массивы, которые будут передаваться в качестве значения присвоенного им ключа.

          Вложенные объекты

          Ниже вы найдёте пример – файл 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.

          Конечно, формат нужно выбирать в зависимости от потребностей приложения.

          Инструменты для JSON

          JSON обычно используется в JavaScript, однако этот формат широко применяется в других языках программирования.

          Больше информации о совместимости и обработке JSON можно найти на сайте проекта и в библиотеке jQuery .

          Писать JSON с нуля приходится редко. Обычно данные загружаются из исходников или преобразовываются в JSON. Вы можете преобразовать CSV или данные с разделителями табуляцией в JSON с помощью открытого инструмента Mr. Data Converter . Чтобы преобразовать XML в JSON и наоборот, используйте utilities-online.info . При работе с автоматическими инструментами обязательно проверяйте результат.

          Файлы JSON (в том числе и преобразованные данные) можно проверить с помощью сервиса JSONLint . Чтобы протестировать JSON в контексте веб-разработки, обратитесь к JSFiddle .

          Заключение

          JSON – простой и легковесный формат данных. Файлы JSON легко передавать, хранить и использовать.

          Сегодня JSON часто используется в API.

          Наверняка вы когда-нибудь слышали о JSON. Что же это такое? Что он может и как его использовать?

          В данном уроке мы расскажем об основах JSON и раскроем следующие пункты:

          • Что такое JSON?
          • Для чего используется JSON?
          • Как создать строку JSON?
          • Простой пример строки JSON.
          • Сравним JSON и XML.
          • Как работать с JSON в JavaScript и PHP?
          Что такое JSON?

          JSON - простой, основанный на использовании текста, способ хранить и передавать структурированные данные. С помощью простого синтаксиса вы можете легко хранить все, что угодно, начиная от одного числа до строк, массивов и объектов, в простом тексте. Также можно связывать между собой массивы и объекты, создавая сложные структуры данных.

          После создания строки JSON, ее легко отправить другому приложению или в другое место сети, так как она представляет собой простой текст.

          JSON имеет следующие преимущества:

          • Он компактен.
          • Его предложения легко читаются и составляются как человеком, так и компьютером.
          • Его легко преобразовать в структуру данных для большинства языков программирования (числа, строки, логические переменные, массивы и так далее)
          • Многие языки программирования имеют функции и библиотеки для чтения и создания структур JSON.

          Название JSON означает JavaScript Object Notation (представление объектов JavaScript). Как и представляет имя, он основан на способе определения объектов (очень похоже на создание ассоциативных массивов в других языках) и массивов.

          Для чего используется JSON?

          Наиболее частое распространенное использование JSON - пересылка данных от сервера к браузеру. Обычно данные JSON доставляются с помощью AJAX , который позволяет обмениваться данными браузеру и серверу без необходимости перезагружать страницу.

        • Пользователь нажимает миниатюру продукта в онлайн магазине.
        • JavaScript, выполняющийся на браузере, генерирует запрос AJAX к скрипту PHP, запущенному на сервере, передавая ID выбранного продукта.
        • Скрипт PHP получает название продукта, описание, цену и другую информацию из базы данных. Затем составляет из данных строку JSON и отсылает ее браузеру.
        • JavaScript, выполняющийся на браузере, получает строку JSON, декодирует ее и выводит информацию о продукте на странице для пользователя.

          • Также можно использовать JSON для отправки данных от браузера на сервер, передавая строку JSON в качестве параметра запросов GET или POST. Но данный метод имеет меньшее распространение, так как передача данных через запросы AJAX может быть упрощена. Например, ID продукта может быть включен в адрес URL как часть запроса GET.

          Библиотека jQuery имеет несколько методов, например, getJSON() и parseJSON() , которые упрощают получение данных с помощью JSON через запросы AJAX.

          Как создать строку JSON?

          Есть несколько основных правил для создания строки JSON:

          • Строка JSON содержит либо массив значений, либо объект (ассоциативный массив пар имя/значение).
          • Массив заключается в квадратные скобки ([ и ]) и содержит разделенный запятой список значений.
          • Объект заключается в фигурные скобки ({ и }) и содержит разделенный запятой список пар имя/значение.
          • Пара имя/значение состоит из имени поля, заключенного в двойные кавычки, за которым следует двоеточие (:) и значение поля.
          • Значение в массиве или объекте может быть:
            • Числом (целым или с плавающей точкой)
            • Строкой (в двойных кавычках)
            • Логическим значением (true или false)
            • Другим массивом (заключенным в квадратные скобки)
            • Другой объект (заключенный в фигурные скобки)
            • Значение null

          Чтобы включить двойные кавычки в строку, нужно использовать обратную косую черту: \" . Так же, как и во многих языках программирования, можно помещать управляющие символы и шестнадцатеричные коды в строку, предваряя их обратной косой чертой. Смотрите детали на сайте JSON .

          Простой пример строки JSON

          Ниже приводится пример оформления заказа в формате JSON:

          { "orderID": 12345, "shopperName": "Ваня Иванов", "shopperEmail": "[email protected]", "contents": [ { "productID": 34, "productName": "Супер товар", "quantity": 1 }, { "productID": 56, "productName": "Чудо товар", "quantity": 3 } ], "orderCompleted": true }

          Рассмотрим строку подробно:

          • Мы создаем объект с помощью фигурных скобок ({ и }).
          • В объекте есть несколько пар имя/значение: "orderID": 12345 Свойство с именем "orderId" и целочисленным значением 12345 "shopperName": "Ваня Иванов" свойство с именем "shopperName" и строковым значением "Ваня Иванов" "shopperEmail": "[email protected]" Свойство с именем "shopperEmail" и строковым значением "[email protected]" "contents": [ ... ] Свойство с именем "contents" , значение которого является массивом "orderCompleted": true Свойство с именем "orderCompleted" и логическим значением true
          • В массиве "contents" есть 2 объекта, представляющие отдельные позиции в заказе. Каждый объект содержит 3 свойства: productID , productName , и quantity .

          Кстати, так как JSON основан на объявлении объектов JavaScript, то вы можете быстро и просто сделать выше приведенную строку JSON объектом JavaScript:

          var cart = { "orderID": 12345, "shopperName": "Ваня Иванов", "shopperEmail": "[email protected]", "contents": [ { "productID": 34, "productName": "Супер товар", "quantity": 1 }, { "productID": 56, "productName": "Чудо товар", "quantity": 3 } ], "orderCompleted": true };

          Сравнение JSON и XML

          Во многих отношениях вы можете рассматривать JSON как альтернативу XML, по крайней мере, в сфере веб приложений. Концепция AJAX оригинально основывалась на использовании XML для передачи данных между сервером и браузером. Но в последние годы JSON становится все более популярным для переноса данных AJAX.

          Хотя XML является проверенной технологией, которая используется в достаточном количестве приложений, преимуществами JSON являются более компактный и простой для распознавания формат данных.

          Вот как будет выглядеть выше приведенный пример объекта на XML:

          orderID 12345 shopperName Ваня Иванов shopperEmail [email protected] contents productID 34 productName Супер товар quantity 1 productID 56 productName Чудо товар quantity 3 orderCompleted true

          Версия XML имеет существенно больший размер. В действительности она имеет длину 1128 символов, а вариант JSON - только 323 символа. Версию XML также достаточно трудно воспринимать.

          Конечно, это радикальный пример. И возможно создать более компактную запись XML. Но даже она будет существенно длиннее эквивалента на JSON.

          Работаем со строкой JSON в JavaScript

          JSON имеет простой формат, но создавать строку JSON вручную достаточно утомительно. Кроме того, часто нужно взять строку JSON, конвертировать ее содержание в переменную, которую можно будет использовать в коде.

          Большинство языков программирования имеют инструменты для простого преобразования переменных в строки JSON и наоборот.

          Создаем строку JSON из переменной

          JavaScript имеет встроенный метод JSON.stringify() , который берет переменную и возвращает строку JSON, представляющую ее содержание. Например, создадим объект JavaScript, который содержит сведения о заказе из нашего примера, а затем создадим из него строку JSON:

          var cart = { "orderID": 12345, "shopperName": "Ваня Иванов", "shopperEmail": "[email protected]", "contents": [ { "productID": 34, "productName": "Супер товар", "quantity": 1 }, { "productID": 56, "productName": "Чудо товар", "quantity": 3 } ], "orderCompleted": true }; alert (JSON.stringify(cart));

          Данный код выдаст:

          Обратите внимание, что метод JSON.stringify() возвращает строку JSON без пробелов. Ее сложнее читать, но зато она более компактна для передачи через сеть.

          Существует несколько способов разобрать строку JSON в JavaScript, но самый безопасный и надежный - использовать встроенный метод JSON.parse() . Он получает строку JSON и возвращает объект или массив JavaScript, который содержит данные. Например:

          var jsonString = " \ { \ "orderID": 12345, \ "shopperName": "Ваня Иванов", \ "shopperEmail": "[email protected]", \ "contents": [ \ { \ "productID": 34, \ "productName": "Супер товар", \ "quantity": 1 \ }, \ { \ "productID": 56, \ "productName": "Чудо товар", \ "quantity": 3 \ } \ ], \ "orderCompleted": true \ } \ "; var cart = JSON.parse (jsonString); alert (cart.shopperEmail); alert (cart.contents.productName);

          Мы создали переменную jsonString , которая содержит строку JSON нашего примера с заказом. Затем мы передаем данную строку методу JSON.parse() , который создает объект, содержащий данные JSON и сохраняет его в переменной cart . Остается только осуществить проверку, выведя свойства объекта shopperEmail и productName массива contents .

          В результате мы получим следующий вывод:

          В реальном приложении ваш JavaScript код будет получать заказ в виде строки JSON в AJAX ответе от скрипта сервера, передавать строку методу JSON.parse() , а затем использовать данные для отображения на странице пользователя.

          JSON.stringify() и JSON.parse() имеют другие возможности, такие как использование возвратных функций для пользовательской конвертации определённых данных. Такие опции очень удобны для конвертации различных данных в правильные объекты JavaScript.

          Работаем со строкой JSON в PHP

          PHP, как и JavaScript, имеет встроенные функции для работы с JSON строками.

          Создаем строку JSON из переменной PHP

          Функция json_encode() принимает переменную PHP и возвращает строку JSON, представляющую содержание переменной. Вот наш пример с заказом, написанный на PHP:

          Данный код возвращает абсолютно такую же строку JSON, как и в примере с JavaScript:

          {"orderID":12345,"shopperName":"Ваня Иванов","shopperEmail":"[email protected]","contents":[{"productID":34,"productName":"Супер товар","quantity":1},{"productID":56,"productName":"Чудо товар","quantity":3}],"orderCompleted":true}

          В реальном приложении ваш скрипт PHP пришлет данную строку JSON как часть AJAX ответа браузеру, где JavaScript код с помощью метода JSON.parse() преобразует ее обратно в переменную для вывода на странице пользователя.

          Вы может передавать различные флаги в качестве второго аргумента функции json_encode() . С их помощью можно изменять принципы кодирования содержания переменных в строку JSON.

          Создаем переменную из строки JSON

          Для преобразования строки JSON в переменную PHP используется метод json_decode() . Заменим наш пример для JavaScript с методом JSON.parse() на код PHP:

          Как и для JavaScript данный код выдаст:

          [email protected] Чудо товар

          По умолчанию функция json_decode() возвращает объекты JSON как объекты PHP. Существуют обобщенные объекты PHP класса stdClass . Поэтому мы используем -> для доступа к свойствам объекта в примере выше.

          Если вам нужен объект JSON в виде ассоциированного массива PHP, нужно передать true в качестве второго аргумента функции json_decode() . Например:

          $cart = json_decode($jsonString, true); echo $cart["shopperEmail"] . "
          "; echo $cart["contents"]["productName"] . "
          ";

          Данный код выдаст такой же вывод:

          [email protected] Чудо товар

          Также функции json_decode() можно передавать другие аргументы для указания глубины рекурсии и способов обработки больших целых чисел.

          Заключение

          Хотя JSON прост для понимания и использования, он является очень полезным и гибким инструментом для передачи данных между приложениями и компьютерами, особенно при использовании AJAX. Если вы планируете разрабатывать AJAX приложение, то нет сомнений, что JSON станет важнейшим инструментом в вашей мастерской.

    • © Copyright 2024, Осваиваем ПК - Интернет. Скайп. Социальные сети. Уроки по Windows