У меня есть HTML-сайт, который использует API для получения последних обменных курсов. У меня также есть таблица данных, которая извлекает список продуктов из базы данных и отображает его в таблице.
Я пытаюсь получить информацию о нескольких основных валютах, таких как доллары США, евро и т. Д., И использую эти курсы, чтобы иметь возможностьпреобразуйте столбец «цена», чтобы отразить выбранную валюту.
Я включил код ниже, чтобы показать, с чем я работаю.
Валюта API:
$(function() { //populate the DDL with stock names and symbols
$.get("https://api.exchangeratesapi.io/latest", function(data, status, jqxhr) {
var fullList = "";
fullList += "<table class='display' id='datatable' width='100%'>"
fullList += "<thead><tr><th>Rates</th><th>Date</th><th>Against the Euro</th> <
/tr></thead > ";
fullList += "<tbody>"
for (const key of Object.keys(data.rates)) {
// fullList+=`<option>${key+" " + data.rates[key]}</option>`;
fullList += `<tr><td>${key+data.rates[key]}</td><td>${data.date}</td><td>${data.base}</td></tr>`;
}
База данныхТаблица:
var theFullList = < % -fullList % > ; //minus sign doesnt encode quotes
var thetable = " ";
thetable += "<thead><tr><th>Product ID</th><th>Product Name</th><th>Unit Price</th></tr></thead>";
thetable += "<tbody>";
for (var i = 0; i < theFullList.length; i++) {
thetable += "<tr><td>" + theFullList[i].ProductID + "</td><td>" + theFullList[i].ProductName + "</td><td>" + theFullList[i].UnitPrice + "</td></tr>";
}
thetable += "</tbody></table>";
$("#datatable").append(thetable);
$(document).ready(function() {
$('#datatable').dataTable({
"lengthMenu": [20, 40, 60, 80, 100],
"pageLength": 20
});
});
Итак, первый скрипт получает все валюты и показывает их в таблице. Второй скрипт получает список товаров из базы данных и показывает их цену. Я хочу объединить эти два источника данных и иметь возможность изменять единицы измерения в зависимости от выбранной валюты.