Вопрос или проблема
Прежде всего, хотя я довольно комфортно чувствую себя с кодом, я также довольно нов в разработке на WordPress, JS и PHP, так что, пожалуйста, простите меня, если это объяснено не очень хорошо или это действительно вопрос новичка.
Я хотел бы добавить данные из этого JSON-ленты:
http://ebird.org/ws1.1/data/obs/geo/recent?lng=-112.53&lat=53.38&dist=10&back=30&maxResults=500&locale=en_US&fmt=json (документация доступна через поиск “eBird API 1.1”) в таблицу с колонками “Общее название”, “Количество”, “Дата” и “Название места”. Мне также хотелось бы “украсить таблицу” с помощью jQuery dataTables, чтобы люди могли сортировать/искать/постранично просматривать.
У меня есть две амбициозные цели:
1. сделать так, чтобы название места вело на карту Google с указанными широтой/долготой из JSON-ленты, например, что-то вроде:
<td><a href="http://maps.google.ca/maps?f=d&daddr=" $data["lat'] ',' $data['lng'] '&z=8" target="_blank">'$data['locName']'</a><td>'
и 2. было бы 정말 здорово, если бы люди могли выбирать значения расстояния и даты из выпадающих списков, чтобы загружать разные результаты из JSON-ленты (например, &dist=10/25/50 и &back=7/14/30).
Страница, над которой я работаю, в данный момент находится по адресу http://djmdesign.ca/bbo/updates/sightings/, но будет перенесена на beaverhillbirds.com/updates/sightings/. Я пытался, безуспешно, заставить плагины сделать это за меня (в данный момент у меня есть статическая таблица, показывающая общее представление о желаемом результате), а также есть некоторые наброски на beaverhillbirds.com/jsonfeed.html и jsonfeed2.html.
Буду признателен за любые советы/предложения/размышления/код!
По первому вопросу вы можете попробовать использовать следующий код в GitHub
https://gist.github.com/phpkidindia/a448e9b8132d3634bdebfa70a8d20c03
Для второго варианта вам следует создать форму с двумя полями: дата и расстояние, и при изменении этих двух полей вам следует создать AJAX-запрос и связать результат с таблицей данных.
Надеюсь, это поможет.
Ответ или решение
Создание динамической таблицы данных из внешнего JSON-источника
Ваша задача создать динамическую таблицу на сайте WordPress, которая будет отображать данные из предоставленного вами JSON-канала. Ниже представлен подробный план, который поможет вам достичь ваших целей.
Шаг 1: Получение данных из JSON
Для начала, вам необходимо использовать функции JavaScript и AJAX, чтобы извлечь данные из вашего JSON-канала. В WordPress вы можете сделать это с помощью jQuery:
jQuery(document).ready(function($) {
fetch('http://ebird.org/ws1.1/data/obs/geo/recent?lng=-112.53&lat=53.38&dist=10&back=30&maxResults=500&locale=en_US&fmt=json')
.then(response => response.json())
.then(data => {
// вызов функции для обновления таблицы
updateTable(data);
})
.catch(error => console.error('Ошибка:', error));
});Шаг 2: Обновление таблицы
Создайте функцию updateTable(data), которая будет обрабатывать полученные данные и создавать строки таблицы с необходимыми столбцами ("Общее имя", "Количество", "Дата" и "Название места"). Заранее убедитесь, что у вас есть HTML-код структуры таблицы:
<table id="sightingsTable">
<thead>
<tr>
<th>Общее имя</th>
<th>Количество</th>
<th>Дата</th>
<th>Название места</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>Функция заполнения таблицы может выглядеть так:
function updateTable(data) {
let tableBody = $('#tableBody');
tableBody.empty(); // очистка существующих данных
data.forEach(item => {
let row = `<tr>
<td>${item.comName}</td>
<td>${item.howMany}</td>
<td>${new Date(item.obsDt).toLocaleDateString()}</td>
<td><a href="http://maps.google.ca/maps?f=d&daddr=${item.lat},${item.lng}&z=8" target="_blank">${item.locName}</a></td>
</tr>`;
tableBody.append(row);
});
// Применение jQuery DataTables
$('#sightingsTable').DataTable();
}Шаг 3: Добавление элементов управления
Для выполнения вашей задачи о выборе расстояния и даты, добавьте два выпадающих списка на страницу. Пример HTML-кода:
<select id="distanceSelect">
<option value="10">10 км</option>
<option value="25">25 км</option>
<option value="50">50 км</option>
</select>
<select id="dateSelect">
<option value="7">7 дней</option>
<option value="14">14 дней</option>
<option value="30">30 дней</option>
</select>Теперь создайте обработчик события для изменения этих полей:
$('#distanceSelect, #dateSelect').change(function() {
let dist = $('#distanceSelect').val();
let back = $('#dateSelect').val();
// обновляем запрос согласно выбранным параметрам
let url = `http://ebird.org/ws1.1/data/obs/geo/recent?lng=-112.53&lat=53.38&dist=${dist}&back=${back}&maxResults=500&locale=en_US&fmt=json`;
fetch(url)
.then(response => response.json())
.then(data => {
updateTable(data);
})
.catch(error => console.error('Ошибка:', error));
});Заключение
Принятые меры помогут вам создать динамическую таблицу, которая будет извлекать данные из JSON-канала, а также добавлять интерактивность с помощью jQuery и DataTables. Ваши дополнительные цели по добавлению возможности перехода на карты Google и выбору параметров также были учтены. Если у вас появятся дополнительные вопросы или необходимость в уточнениях, не стесняйтесь обращаться за помощью.