时间戳

首页 > 解决方案 > getJSON 不从服务器加载数据

javascript - getJSON 不从服务器加载数据

问题描述

有一个表格形式的简单货币转换器。无论我多么努力，我都无法使用该getJSON功能，以便根据中央银行网站的实际数据进行转换。目前，数组只是复制到 js 文件中。

json数组

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">€&lt;/button>
          <script src="js/index.js" async defer></script>
    </body>
</html>

标签： javascripthtmljsonparsingconverters

解决方案

在使用目标变量之前添加一个setTimeout对我有用。

var data = {};
    
$.getJSON('https://www.cbr-xml-daily.ru/archive/2021/01/20/daily_json.js', function(resp) {
    data = Object.assign({}, resp);
});
setTimeout(function(){
    console.log(data);
}, 200);

推荐阅读