Доступ и вывод на страницу определенного значения JSON
Этот раздел продолжает предыдущую тему: Изучение полезных данных в JSON ответе. На странице, где мы залоггировали ответ от сервиса погоды на консоль JS, информация ответа REST не появилась на странице. Она появилась только в консоли JS. Нам нужно использовать точечную нотацию и JavaScript для доступа к нужным значениям JSON. В этом разделе мы используем JavaScript, чтобы отобразить часть ответа на странице.
Обратите внимание, что в этом разделе будет использовать JavaScript. Может быть, в будущем этот код не пригодится при документировании, но знать его будет не лишним.
Получение определенного свойства из объекта JSON ответа
JSON был бы не очень полезен, если бы всегда приходилось распечатывать весь ответ. Вместо этого можно выбрать нужное свойство, и получить его через точечную запись. Точка . после response (имя полезной данной JSON, как она определена произвольно в функции JQuery AJAX) определяет доступ к нужным значениям из объекта JSON.
Допустим, мы хотим извлечь часть о скорости ветра в ответе JSON. Так выглядит точечная нотация, которую нужно использовать:
response.wind.speed Чтобы извлечь элемент скорости ветра из ответа JSON и распечатать его в консоли JavaScript, добавляем его в пример кода (который мы создали в предыдущем разделе) прямо под строкой console.log (response) :
console.log("wind speed: " + response.wind.speed); Код будет выглядеть так:
$.ajax(settings).done(function (response) console.log(response); console.log("wind speed: " + response.wind.speed); >); После этого обновляем браузер и видим информацию, появившуюся в консоли.
wind speed: 13.87 Вывод JSON значения на страницу
Допустим, нам надо вывести часть JSON (данные о скорости ветра) на страницу, а не только в консоли. (Под словом “вывести” подразумевается отображение значения странице, а не отправка на принтер.) Для вывода значения требуется немного JavaScript (или jQuery для упрощения).
Работать будем с тем же кодом из предыдущего раздела. Этот код выглядит так:
charset="utf-8"> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> Sample Page var settings = "async": true, "crossDomain": true, "url": "https://api.openweathermap.org/data/2.5/weather?zip=95050&appid=fd4698c940c6d1da602a70ac34f0b147&units=imperial", "method": "GET" > $.ajax(settings).done(function (response) console.log(response); >); Sample Page Для вывода определенного значения ответа на страницу:
- Добавим следующие строки внутрь функции ajax
$.ajax(settings).done(function (response) console.log(response); var content = response.wind.speed; $("#windSpeed").append(content); >); - В теле страницы (внутри тега body ) добавим следующий тэг div :
Sample page id="windSpeed">Wind speed: Код должен получиться таким:
charset="utf-8"> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> Sample Page var settings = "async": true, "crossDomain": true, "url": "https://api.openweathermap.org/data/2.5/weather?zip=95050&appid=fd4698c940c6d1da602a70ac34f0b147&units=imperial", "method": "GET" > $.ajax(settings).done(function (response) console.log(response); var content = response.wind.speed; $("#windSpeed").append(content); >); Sample Page id="windSpeed">Wind speed: - Обновляем страницу и видим отображение скорости ветра на странице Пример здесь с выведенными со скоростью ветра и погодными условиями.
Вот что мы изменили:
В теге метода done AJAX’а извлекли желаемое значение в переменную:
var content = response.wind.speed; И добавили названный элемент в тело страницы
id="windSpeed">Wind speed: Мы использовали метод append jQuery для добавления переменной content к элементу с ID windSpeed на странице:
$("#windSpeed").append(content); Этот код говорит: найди элемент с ID windSpeed и добавь переменную content после него.
Получение значения из массива
В предыдущей части мы получили значение из объекта JSON. Теперь получим значение из массива. Давайте получим свойство main из массива weather в ответе. Вот как выглядит массив JSON:
"weather": [ "id": 801, "main": "Clouds", "description": "few clouds", "icon": "02d" > ] > Помните, что квадратные скобки означают массив. Внутри массива погоды находится неназванный объект. Чтобы получить основной элемент из этого массива, нужно использовать следующую точечную нотацию:
response.weather[0].main В то время как объекты позволяют вам получить определенное свойство, массивы требуют, чтобы вы выбрали нужную позицию в списке.
Теперь код будет выглядеть так:
charset="UTF-8"> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> Sample Page var settings = "async": true, "crossDomain": true, "url": "https://api.openweathermap.org/data/2.5/weather?zip=95050&appid=fd4698c940c6d1da602a70ac34f0b147&units=imperial", "method": "GET" > $.ajax(settings).done(function (response) console.log(response); var content = response.wind.speed; $("#windSpeed").append(content); var currentWeather = response.weather[0].main; $("#currentWeather").append(currentWeather); >); Sample Page id="windSpeed">Wind speed: id="currentWeather">Current weather conditions: Дополнительные упражнения
При желании можно выполнить еще несколько упражнений, которые включают вызовы API REST, доступ к определенным значениям и вывод значений на странице, см. Следующие разделы в модуле «Глоссарий и ресурсы»:
- Получаем информацию о событии при использовании API Eventbrite
- Пример Flickr: извлекаем галерею Flickr
- Получаем скорость ветра при использовании сервиса API Aeris Weather
Как найти и распарсить JSON на странице сайта в интернете с помощью VBA Excel?
В этом посте я покажу, как с помощью VBA сделать, то, для чего VBA вроде бы как изначально не предназначен – как получить значения нужных переменных из структуры JSON.
В чем отличие между сервисом ЦБ России и сайтом worldometers.info? В том, что ЦБ предлагает XML сервис для автоматической загрузки информации (см. http://www.cbr.ru/development/SXML/) – ее неудобно смотреть через веб браузер, но удобно получать с помощью паучьих алгоритмов, а worldometers.info предлагает информацию для людей, а не для пауков.
Поэтому создаваемому на VBA паучку придется постараться, чтобы понять разметку «для людей».
Для работы паука необходимо дополнительно подключить три библиотеки:
- Microsoft XML parser (MSXML) – тот же, что использовался для получения курсов ЦБ с сайта Банка России.
- Библиотеку для работы с объектной моделью HTML.
- Библиотеку для использования возможностей JavaScript из VBA.
Запускаем паучка на сайт: https://www.worldometers.info/coronavirus/coronavirus-cases/
Sub GetJSONformHTML() Dim xmlhttp As New MSXML2.XMLHTTP60, urlWorldometers As String urlWorldometers = "https://www.worldometers.info/coronavirus/coronavirus-cases/" xmlhttp.Open "GET", urlWorldometers, False xmlhttp.setRequestHeader "Content-Type", "text/json" xmlhttp.setRequestHeader "Content-Type", "application/x-www-form-urlencoded" xmlhttp.setRequestHeader "User-Agent", "Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36" xmlhttp.send
В полученном html паучку нужно найти и распарсить данные о количестве зарегистрированных случаев из формата JSON. Эти данные представлены вторым аргументом в вызове функции Highcharts.chart(chartName, chartData), которая на сайте рисует график.
Dim html As New HTMLDocument html.body.innerHTML = xmlhttp.responseText
В результате выполнения нижепредставленного кода в переменной strJson должна оказаться структура с данными в JSON формате.
Dim scripts As IHTMLDOMChildrenCollection Set scripts = html.querySelectorAll("script") Dim i As Integer, start As Integer, finish As Integer, strJson As String, jsfunc As String Dim strGraph As String strGraph = "Highcharts.chart('coronavirus-cases-linear'," For i = 0 To scripts.Length - 1 start = InStr(scripts(i).innerHTML, strGraph) If start > 0 Then finish = InStr(scripts(i).innerHTML, ");") jsfunc = scripts(i).innerHTML start = start + Len(strGraph) strJson = Mid(jsfunc, start, finish - start) Exit For End If Next
Теперь самое интересное – как распарсить эту JSON структуру? Чистый VBA это делать не умеет. Но с JSON прекрасно работает JavaScript.
А в VBA есть инструмент для использования возможностей JavaScript для пользователей MS Excel.
Dim myJSCript As ScriptControl Set myJSCript = New ScriptControl myJSCript.Language = "JScript"
Мы можем в VBA получить уже распарсенную JSON переменную:
Dim objJSON As Object Set objJSON = myJSCript.Eval("(" + strJson + ")")
Проблема в том, что с объектом objJSON ничего нельзя сделать в рамках VBA – у него нет ни свойств, ни методов. Поэтому создаем эти методы на языке JavaScript. Нам нужно вытащить даты (xAxis) и количество (series->data):
Вот что пишем в VBA редакторе:
myJSCript.AddCode "function getDataSeries(jstruct) " myJSCript.AddCode "function getxAxis(jstruct) "
Загоняем данные в привычные VBA массивы:
Dim v1 As String, v2 As String v1 = myJSCript.Run("getDataSeries", objJSON) v2 = myJSCript.Run("getxAxis", objJSON) Dim x() As String, d() As String x() = Split(v2, ",") d() = Split(v1, ",")
Ну и раскатываем эти массивы по рабочему листу:
For i = 0 To UBound(x) Range("A" & i + 1) = x(i) Range("B" & i + 1) = d(i) Next Set objJSON = Nothing Set scripts = Nothing html.Close Set xmlhttp = Nothing Set myJSCript = Nothing MsgBox "Готово." End Sub
Вот, что получилось в результате на листе рабочей книги:
По этим данным легко построить график, например, такой:
Excel файл с кодом можно скачать здесь. Если будут вопросы – пишите их сюда.
Получить ссылку на JSON файл из кода страницы
https://www.pgatour.com/players/player.34046.jordan-spieth.html Одна из статистик / показателей, представленных в профиле игрока PGAT, — «Официальные деньги». Эта статистика получена из статического файла * .json. Нужно получить url этого файла. Помогите пожалуйста.
Отслеживать
задан 2 сен 2020 в 12:32
Skazalasobaka Skazalasobaka
39 5 5 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Для того, чтобы получить эту ссылку я перешёл на целевую страницу в хроме с открытыми инструментами разработчика (на клавиатуре или ++ ). Перешёл на вкладку «Network» и указал в поиске, что меня интересуют JSON файлы. Потом дважды кликал на каждый из них и использовал + для того, чтобы искать целеувую строку:
Отслеживать
ответ дан 2 сен 2020 в 12:48
1,274 2 2 золотых знака 10 10 серебряных знаков 24 24 бронзовых знака
а как вы получили именно ссылку?
2 сен 2020 в 13:21
Обновил ответ))
2 сен 2020 в 13:31
интересно. я делал точно также но так и не получилось отыскать нужный 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