Метод jQuery $.getJSON, как следует из его названия, предназначен для получения методом GET данных в формате JSON. Поэтому ему в качестве параметра необходимо передать путь к JSON-файлу.
Мы рассмотрим пример, в котором с помощью API Privatbank сможем загрузить JSON-файл с данными о курсах валют на сегодняшний день.
Сделаем html-разметку в виде таблицы:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <body> <table id="currencyTable"> <caption>Курс валют от Приватбанка на <span id="date"></span></caption> <thead> <tr> <th>Валюта 1</th> <th>Валюта 2</th> <th>Покупка</th> <th>Продажа</th> </tr> </thead> <tbody></tbody> </table> <!-- Google jQuery--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="js/currency-get.js"></script> </body> |
Внизу, перед закрывающим тегом </body> мы подключим библиотеку jQuery c Google CDN, а после этого - наш файл currency-get.js, в котором напишем такой скрипт:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $('#date').text(new Date().toLocaleDateString()); const currencyObj = { USD: 'доллар США', UAH: 'укр. гривна', RUR: 'рос. рубль', EUR: 'евро', BTC: 'биткоин' } $.getJSON("https://api.privatbank.ua/p24api/pubinfo?json&exchange&coursid=5", function (result) { console.log(result); $.each(result, function (i, field) { console.log('field', field); var tr = "<td>" + currencyObj[field.base_ccy] + "</td><td>" + currencyObj[field.ccy] + "</td><td>" + field.buy + "</td><td>" + field.sale + "</td>"; $("#currencyTable tbody").append("<tr>" + tr + "</tr>"); }); }); |
В первой строке скрипта мы определяем сегодняшнюю дату с помощью встроенного объекта Date, чтобы вывести ее в заголовке таблицы. Затем создаем объект, который позволит нам указать не сокращенные имена валют, а полное их название. Данные берем со страницы API Приватбанка:
Там же видим ссылку на нужный JSON-файл:
Когда мы выполняем загрузку этого JSON-файла, то в 10-й строке выводим информацию в виде данных из него в консоль:
В каждом из значений элементов массива, которые мы получили после парсинга JSON-файла (причем, ничего для этого не делая), содержится ряд полей, которые мы потом размещаем в ячейках таблицы, формируя строку из данных.
Теперь было бы неплохо посмотреть на саму таблицу с курсами валют, которую мы получили (открыть в новой вкладке):
Все достаточно просто, не так ли? Однако на данный момент скрипт не работает, т.к. по какой-то причине Приватбанк не разрешает сторонним скриптам загружать данные, хотя и объявляет свои данные публичными. Данный пример работал ранее, о чем свидетельствуют скриншоты ниже.
Важным моментом при выводе информации является то, каким образом сформирован JSON-файл. Чаще всего в нем находится массив с объектами, которые имеют одинаковые поля, поэтому парсинг такого файла будет аналогичен вышеприведенному коду.
Если же кроме аналогичного массива есть еще какие-нибудь поля и данные, то вам придется самостоятельно разобраться, каким образом обращаться к нужному полю. Чаще всего, это будет что-то вроде result.fieldName, если вы назвали переменную, передаваемую функции-колбеку, именем result, как в примере выше.
| 1 2 3 4 5 | $.getJSON("filename.json", function (result) { ...; //код функции console.log(result.fieldName); }); |
Здравствуйте. Подскажите пожалуйста, а как возможно полученные данные преобразовать в более короткое число, например 28.55000 в 28.55 и т.д. ?!
num.toFixed(2)- в скобках указываете нужное количество цифр после запятой.num- нужное число