如何在JS函数中使用JSON数据？

Question

我从bitcoinaverage.com的API中提取数据并将其保存在var＆＃39; price＆＃39;。

后来我想在JS中使用它进行计算，但它不起作用，只有在我输入静态整数而不是动态＆＃39;价格＆＃39; 。

我已经在价格上尝试过pasteInt（）但它仍然无法正常工作。关于我可能做错的任何想法？ https://jsfiddle.net/7b2jaLxh/

var xbtc = new XMLHttpRequest();
xbtc.open('GET', 'https://api.bitcoinaverage.com/ticker/global/CAD/', true);
xbtc.onreadystatechange = function(){
    if(xbtc.readyState == 4){
        var ticker = JSON.parse(xbtc.responseText);
        price = ticker.last;
    }
};
xbtc.send();

这里是使用价格变量的JS :(在底部）

var directionSlider = document.getElementById('slider-direction');

noUiSlider.create(directionSlider, {
    start: 20,
    connect: [true, false],
    direction: 'ltr',
    range: {
        'min': 2,
        'max': 99.99
    }
});
var cadc = document.getElementById('cadc');
var btcc = document.getElementById('btcc');

directionSlider.noUiSlider.on('update', function( values, handle ) {
    cadc.value = directionSlider.noUiSlider.get();
    cadConvert();
});

cadc.addEventListener('change', function(){
    directionSlider.noUiSlider.set(this.value);
    cadConvert();
});
btcc.addEventListener('change', function(e){
   directionSlider.noUiSlider.set(this.value*price);
});
function cadConvert() {
    var cad = directionSlider.noUiSlider.get();
    var cadCalc = cad / price;
    document.getElementById("btcc").value = cadCalc;

}

Answer 1

尝试将cad变量赋值更改为：

var cad = parseFloat(directionSlider.noUiSlider.get());

那是因为滑块很可能将值作为字符串返回，而不是作为浮点数返回。

更新的答案：

我做了一个console.log(cad, typeof cad);，它确实是一个从滑块返回的字符串值，因此我将代码更改为以下内容：

function cadConvert() {
    if(!price) return;
    var cad = parseFloat(directionSlider.noUiSlider.get());
    var cadCalc = cad / price;
    document.getElementById("btcc").value = cadCalc;
}

我测试了，你的滑块现在工作正常。试试这个更新的小提琴：

https://jsfiddle.net/5pxvvmdL/

另外，我在其他声明附近的顶部添加了var price;声明，仅用于代码可读性目的，因为即使在Javascript中指定变量而不使用var它也会自动声明为一个全局变量，最好是通过在全局范围内（在任何函数之外）使用var逐步声明全局变量来明确地在代码中执行此操作。如上所述，仅用于代码可读性目的。

另外，我在price.js中注释了document.getElementById('btc').innerHTML = "Global Market: $" + (price).toFixed(2) + " CAD";行，因为文档中没有“btc”图层，因此抛出了错误。

最后，我在onreadystatechange事件中添加了对cadConvert（）的调用，以便在加载时使用默认滑块价格显示默认比特币价格。