Вы здесь: Главная » JavaScript » AJAX » Использование метода jQuery $.getJSON для загрузки курсов валют

Использование метода jQuery $.getJSON для загрузки курсов валют

Метод jQuery $.getJSON, как следует из его названия, предназначен для получения методом GET данных в формате JSON. Поэтому ему в качестве параметра необходимо передать путь к JSON-файлу.

Мы рассмотрим пример, в котором с помощью API Privatbank сможем загрузить JSON-файл с данными о курсах валют на сегодняшний день.

Сделаем html-разметку в виде таблицы:

Внизу, перед закрывающим тегом </body> мы подключим библиотеку jQuery c Google CDN, а после этого - наш файл  currency-get.js, в котором напишем такой скрипт:

В первой строке скрипта мы определяем сегодняшнюю дату с помощью встроенного объекта Date, чтобы вывести ее в заголовке таблицы. Затем создаем объект, который позволит нам указать не сокращенные имена валют, а полное их название. Данные берем со страницы API Приватбанка:

Данные о валютах Приватбанка

Там же видим ссылку на нужный JSON-файл:Privatbank JSON-файл

Когда мы выполняем загрузку этого JSON-файла, то в 10-й строке выводим информацию в виде данных из него в консоль:
Все значения из JSON-файла

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

Одно значение из JSON-файлв

Теперь было бы неплохо посмотреть на саму таблицу с курсами валют, которую мы получили (открыть в новой вкладке):

Все достаточно просто, не так ли?

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

Контент JSON-файла

Если же кроме аналогичного массива есть еще какие-нибудь поля и данные, то вам придется самостоятельно разобраться, каким образом обращаться к нужному полю. Чаще всего, это будет что-то вроде result.fieldName, если вы назвали переменную, передаваемую функции-колбеку именем result, как в примере выше.

 

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *