2017-03-22 19 views
0

変数に変数を渡してAPIリンクを動的にしたいという問題に直面しています。私のAPIはhttp://api.fixer.io/latest?symbols=SGD,MYR です。ここで入力した入力フィールドの最後の2つの値、すなわちSGD & MYRを動的変数として使用します。だからこれをどうやって? ここに私のフルコードです。APIリンクに動的変数を追加するにはどうすればよいですか?

$(function(){ 
 
    $('button').on('click' , function(){ 
 
     var val1 = document.getElementById('value1').value; 
 
     var val2 = document.getElementById('value2').value; 
 

 
     var $records = $('#records'); 
 

 
     $.ajax({ 
 
\t  type: 'GET' , 
 
       url: "http://api.fixer.io/latest?symbols="+val2+","+val1, //value are not coming to the link 
 
       success: function(data) 
 
       { 
 
        console.log(val1);  // values are coming here 
 
\t   console.log(val2);  // values are coming here 
 
      \t var rate1 = data.rates.val1 ; 
 
     \t var rate2 = data.rates.val2 ; 
 
     \t var final = rate1/rate2 ; 
 
     \t $('#records').html ('Total Rate for Above Currency is : ' + final) ; 
 
       } 
 
      }); 
 
     }); 
 
    });
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 
<body align="center"><br/><br/><br/> 
 
<h1> Welcome Currency Convertor </h1> <br/><br/> 
 
Local CCY : <input type="text" id="value1"> <br/><br/> 
 
Hotel CCY : <input type="text" id="value2"> <br/><br/> 
 
<button> Show rate </button> <br/><br/> 
 
<div id="records"> </div> 
 
</body> 
 
</html>

私を助けて。前もって感謝します。

+0

あなたは私たちに有効なAPIリクエストを与えることができますか? 'val1'と' val2'はどのような値ですか? –

+0

Rahulを入力フィールド1に、sinhaを入力フィールド2に書き込むと、リンクは次のようになります。 "http://api.fixer.io/latest?symbols=Rahul,sinha"、 –

+0

有効なAPI要求:http ://api.fixer.io/latest?symbols = SGD、MYR –

答えて

1

はこれを試してみてください何もありません:

$(function() { 
 
    $('button').on('click', function() { 
 
    var val1 = document.getElementById('value1').value; 
 
    var val2 = document.getElementById('value2').value; 
 
    var $records = $('#records'); 
 
    var composedUrl = "http://api.fixer.io/latest?symbols=" + val1 + "," + val2; 
 

 
    console.log(composedUrl); 
 

 
    $.ajax({ 
 
     type: 'GET', 
 
     url: composedUrl, 
 
     success: function(data) { 
 

 
     var rate1 = data.rates[val1]; 
 
     var rate2 = data.rates[val2]; 
 

 
     console.log(rate1); 
 
     var final = rate1/rate2; 
 
     $('#records').html('Total Rate for Above Currency is : ' + final); 
 
     } 
 
    }); 
 
    }); 
 
});
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 

 
<body align="center"><br/><br/><br/> 
 
    <h1> Welcome Currency Convertor </h1> <br/><br/> Local CCY : <input type="text" id="value1"> <br/><br/> Hotel CCY : <input type="text" id="value2"> <br/><br/> 
 
    <button> Show rate </button> <br/><br/> 
 
    <div id="records"> </div> 
 
</body> 
 

 
</html>

+0

はい、私のためにこの作品は素晴らしいですが、残っているものが1つあります。 var rate1 = data.rates.val1;これを行うことによって> console.log(rate1);それは未定義を示します。しかし私はvar rate1 = data.rates.MYRと書く。それは価値を与える。なぜこれがその価値を与えていないのですか? –

+1

コードを更新しました。あなたはval1とval2でオブジェクト・キーを参照していましたが、実際には 'SGD'と' MYR'というオブジェクトのキーを探していました。変更をチェックしてください: 'var rate1 = data.rates.val1;の代わりに' var rate1 = data.rates [val1]; 'がトリックになります。 –

+0

ああ!申し訳ありません、今は動作しています..ありがとう –

0

あなたはこのように、最後の+を削除する必要があります:何もそれの後に来ることはありませんので

url: "http://api.fixer.io/latest?symbols="+val1+","+val2, 

。 は、今では別の変数または文字列を期待していますが、

+0

はい、それは動作しますが、変数をAPIリンクに渡すと、入力フィールドで使用したリンクでその値が使用されません。 –

+1

url: "http://api.fixer.io/latest?symbols="+val1+","+val2、この値ではURLに来ていません。これを行う方法 ? –

関連する問題