getJSON() Парсинг валют. проблема с js

Question

Имеется простой конвертер валют в виде таблицы. Сколько не старался, не получилось прикрутить функцию getJSON, так чтобы конвертация происходила из актуальных данных с сайта ЦБ. На данный момент массив просто скопирован в js файл.

HELP PLS :/ Актуальный массив JSON

JsFiddle

let json = `{
    "Date": "2021-01-21T11:30:00+03:00",
    "PreviousDate": "2021-01-20T11:30:00+03:00",
    "PreviousURL": "\/\/www.cbr-xml-daily.ru\/archive\/2021\/01\/20\/daily_json.js",
    "Timestamp": "2021-01-20T14:00:00+03:00",
    "Valute": {
        "USD": {
            "ID": "R01235",
            "NumCode": "840",
            "CharCode": "USD",
            "Nominal": 1,
            "Name": "Доллар США",
            "Value": 73.355,
            "Previous": 73.7243
        },
        "EUR": {
            "ID": "R01239",
            "NumCode": "978",
            "CharCode": "EUR",
            "Nominal": 1,
            "Name": "Евро",
            "Value": 89.1483,
            "Previous": 89.2064
        }
    }
}`;


let parsedJSON = JSON.parse(json),
  aPrices = [...document.querySelectorAll('.price_cell')];   //Ищем все элементы по селектору .price_cell

aPrices.forEach(item => {                                     //Выполняем функцию один раз для каждого элемента в массиве
  item.dataset.originalPrice = item.textContent
});

function fReCalc(sValute, sChar) {                          //Задаем функцию , выполняем ее 1 раз, значение в таблице меняем на новое + добавляем символ валюты
  aPrices.forEach(item => {
    item.textContent = Math.ceil(parseFloat(item.dataset.originalPrice) / parseFloat(parsedJSON.Valute[sValute].Value)) + sChar          //Делим значение в таблице на выбранный курс валюты, округляем вверх и добавляем значек валюты
  });
}

document.querySelector('.usd').addEventListener('click', fReCalc.bind(this, 'USD', '$'));          //Возвращаем элемент и регестрируем обработчик
document.querySelector('.eur').addEventListener('click', fReCalc.bind(this, 'EUR', '€'));

.table { width: 300px; }
.row { display: flex; border-bottom: 1px solid black; width: 100%; }
.cell { width: 50%; padding: 10px; margin: 0 5px; }

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>TITLE</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    </head>
    <body>
        <div class="table">
            <div class="row">
              <div class="cell">NAME</div><div class="cell">PRICE</div>
            </div>
            <div class="row">
              <div class="cell">PRODUCT1</div><div class="cell price_cell">1000</div>
            </div>
            <div class="row">
              <div class="cell">PRODUCT2</div><div class="cell price_cell">2000</div>
            </div>
          </div>
          <button class="usd">$</button>
          <button class="eur">€</button>
          <script src="js/index.js" async defer></script>
    </body>
</html>

БЛОГ НА HUSL

getJSON() Парсинг валют. проблема с js

Ответы (0 шт):