我错过了什么?从JSON API URL获取数据以在引导程序上显示

时间:2015-08-06 04:55:34

标签: javascript html css json twitter-bootstrap

尝试自学javascript并无法将JSON从此链接https://www2.shapeshift.io/crowdsales转换为使用javascript,HTML和CSS在引导页面上显示。我似乎无法让它工作,我不知道为什么,有人可以帮忙吗?

以下是javascript:

$.get( "http://www2.shapeshift.io/crowdsales", function( data ) {
    var sold = data['sold.toFixed(2)'];
    var left = data['remaining'];
    var total = sold + left;
    var ratebtc = data['rateT'];
    var percent = sold/total * 100;
    var raised = data.toFixed(2) + 'BTC';
    var percentsold = data.toFixed(2) + '%';
    var orders = data['backers'];
    $('.progress-bar').css('width', percentsold);
    $('.percentage-label').html( percentsold + " \(" + sold + " sold out of " + total + " \)");
    $('.ratebtc').html( ratebtc );
    $('.orders').html( orders);
    $('.raised').html( raised);
});

以下是HTML:

<div class="shapeshift">
        <div class="col-md-1 col-md-offset-5 object-non-visible"
        data-animation-effect="fadeIn">
            <div class="orders"></div>

            <div class="raised"></div>
        </div>
    </div>

    <div class="banner-buynow">
        <div class="col-md-1 col-md-offset-5 object-non-visible"
        data-animation-effect="fadeIn">
            <a class="btn btn-info" href="javascript:void(0);" onclick=
            "opentac();">Buy Now<br>

            <div class="ratebtc"></div></a>
        </div>
    </div>

    <div class="progress">
        <div class="progress-bar active progress-bar-striped" style=
        "width:50%">
            <div class="percentage-label"></div>
        </div>
    </div>

这是CSS

}
.banner-buynow {
    position: absolute;
    top: 65%;
    width: 100%;
    z-index: 2;
}
.shapeshift {
    position: absolute;
    top: 75%;
    width: 100%;
    z-index: 2;
}
.progress {
    position: absolute;
    top: 90%;
    width: 100%;
    z-index: 2;
}

2 个答案:

答案 0 :(得分:0)

$.get( "http://www2.shapeshift.io/crowdsales", function( data ) {
  
   var sold = parseFloat(data['sold']).toFixed(2);//problem
    var left = data['remaining'];
    var total = parseFloat(sold + left).toFixed(2);//problem
    var ratebtc = data['rateT'];
    var percent = sold/total * 100;
    var raised = parseFloat(data['raised']).toFixed(2) + 'BTC';//problem
    var percentsold = parseFloat(data['sold']).toFixed(2) + '%';//problem
    var orders = data['backers'];
    $('.progress-bar').css('width', percentsold);
    $('.percentage-label').html( percentsold + " \(" + sold + " sold out of " + total + " \)");
    $('.ratebtc').html( ratebtc );
    $('.orders').html( orders);
    $('.raised').html( raised);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="shapeshift">
        <div class="col-md-1 col-md-offset-5 object-non-visible"
        data-animation-effect="fadeIn">
            <div class="orders"></div>

            <div class="raised"></div>
        </div>
    </div>

    <div class="banner-buynow">
        <div class="col-md-1 col-md-offset-5 object-non-visible"
        data-animation-effect="fadeIn">
            <a class="btn btn-info" href="javascript:void(0);" onclick=
            "opentac();">Buy Now<br>

            <div class="ratebtc"></div></a>
        </div>
    </div>

    <div class="progress">
        <div class="progress-bar active progress-bar-striped" style=
        "width:50%">
            <div class="percentage-label"></div>
        </div>
    </div>

问题:

  1. 您需要使用json var raised = data.toFixed(2) + 'BTC'; var percentsold = data.toFixed(2) + '%';中存在的数据对我来说似乎毫无用处。因为数据是一个对象。
  2. toFixed()仅适用于浮点数。
  3. 尝试输入此代码并进行检查。

答案 1 :(得分:0)

要从网址获取json响应,请使用$.getJSON

&#13;
&#13;
var url = "https://www2.shapeshift.io/crowdsales";

$.getJSON(url , function (json) {

    var status= json.status;
    console.log(status);

});
&#13;
 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
&#13;
&#13;