2016-05-24 8 views
1

私は単純なページを作成しようとしています。これはあなたのステークを計算し、賭けの店のようにあなたのリターンを取り戻します。.data、情報はNaNとして引き抜かれますか?

これまでのところ、私はそれを私のオッズでハードコーディングしています。しかし、あなたが私のコードで見ているように、私はうまくいきます。私の問題は、この変数を自分のhtmlに組み込もうとしているのですが、 "NaN"の出力を得ていますが、なぜか手がかりがありません!私の試みはコメントアウトされていますが、うまくいけば、これは簡単な修正ですが、私はそれを見ることはできません!

マイHTML:

<html> 

<head> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <title></title> 
    <script type = "text/javascript" 
    src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

    <script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 

     $.getJSON("http://localhost:8888/json.json", function(result){ 

     $.each(result, function(i, field){ 
    //create an element and append data attribute to the element - in this case field name 
    el = $("<div class='bet-block'>" + field.name + field.odds.numerator+"/" + field.odds.denominator + " </div>").data("name", field.name).data("odds", field.odds.numerator+"/" + field.odds.denominator); 

    //append element to DOM 
    $(".bets").append(el); 
    }) 
     //define a click handler for all new elements to display data in a div 
     $(document).on("click", ".bet-block", function() { 
     $(".bet-name").text($(this).data("name")); 
     $(".bet-odds").text($(this).data("odds")); 
     }); 
    }); 


     function calculate_odds() { 
     var winnings = 0, 
     betting_amount = $(".stake").val(); 

     var current_odds = $('.bet-odds').text(); 


     // THIS ECHOS CORRECT ODDS 
     alert(current_odds); 

     winnings = (2/1) * betting_amount; 
     // winnings = (current_odds) * betting_amount; 

     $('.js-winnings').text(winnings); 
    } 

    $(document).ready(function() { 
     $(".stake").keyup(function(){ 
     calculate_odds(); 
     }); 
    }); 
    }); 

</script> 
</head> 

<body> 

    <div class="container"> 
     <div class="row"> 
     <div class="col-md-8"> 
      <div class="bets"> 
       <h1>All Bets</h1> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="slip"> 
       <h1>My Bet Slip</h1> 
       <div class="new-bet-slip"> 
        <p><span class="bet-name"></span> to win @ <span class="bet-odds"></span></p> 
        <input class="stake" type="number" name="betting-amount" min="1" max="5"> 
        <div class="bet-return"> 
        <span>£</span><span class="js-winnings">0.00</span> 
        </div> 
      </div> 
     </div> 
    </div> 
    </div> 
</div> 


</body> 

</html> 

マイJSON:事前に

[{"name":"name1","odds":{"numerator":10,"denominator":1}},[{"name":"name2","odds":{"numerator":5,"denominator":2}}, [{"name":"name3","odds":{"numerator":2,"denominator":1}}, ] 

ありがとう!

+0

いつ、どこで、あなたの(ではない数の略) 'NaN'エラーが表示されていますか?おそらくここで 'el = $("

" + field.name + field.odds.numerator+"/" + field.odds.denominator + "
").data(" name "、field.name).data("オッズ "、field.odds.numerator +"/"+ field.odds.denominator);'? – messerbill

+0

'$ .each'は' $ .each(function(field、i){'? – Gavin

+0

であることを意味していません。/1)* betting_amount; - ハードコーディングされた奇数として働く winnings =(current_odds)* betting_amount; - これは私にNaN –

答えて

0

@gujefersが指摘したように:

var current_odds = $('.bet-odds').text(); 

戻り値:として宣言されているあなたのcurrent_oddsstringhttp://api.jquery.com/text/

arithmetic operationの文字列をにしようとするとin winnings = (current_odds) * betting_amount;NaN(数値ではありません)エラーが発生します。

安全な賭けは、文字列の値をintに変換しようとするでしょう。 parseInt機能はこれを試す例えばstring

intに変換し、コンソールです:

var a = '1'; 
var b = parseInt(a); 
console.log(typeof(a)); //this will return string 
console.log(typeof(b)); //this will return number 
+0

ありがとう、これは治療を働いた! –

+0

np!ハッピーコーディング –

1

入力したJSONデータが正しくフォーマットされていません。大かっこを確認してもう一度お試しください。このサイトでは、その目的のために有用である:https://jsonformatter.curiousconcept.com/

+0

私はこれを指摘しようとしていましたが、OPが報告しているエラーを説明しませんでした。事実、彼のコードに到達することさえできません。 – Gavin

0

私は、これはあなたを助けることを願って...

$.getJSON("http://localhost:8888/json.json", function(result){ 

//parse the json & try 
     var data= jQuery.parseJSON(result); 

     $.each(data, function(i, field){ 
      //do your action 
      console.log(field.name) 
       $.each(field.odds, function(k, level2){ 
        console.log(level2.numerator,level2.denominator) 
       }); 


     }); 
    }); 
関連する問題