I have a little currency exchange function going in a website and it works fine but today I've been asked to add the possibility of registering the best exchange rate and from then on being able to retrieve it and compare it to today's exchange rate.
So the snippet of the original function is the following (where exchangepair is set by the user -- ex. 'USDEUR'):
<script type="text/jscript">
function doexchange(exchangepair) {
$.ajax({
url: 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22'+exchangepair+'%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=',
success: function(response) {
successCallback(response);
},
error: function(response) {
//Error display
}
});
}
function successCallback(responseObj){
var stringObj = JSON.stringify(responseObj),
exchange = JSON && JSON.parse(stringObj) || $.parseJSON(stringObj),
exchangerate = exchange.query.results.rate.Rate;
//Do stuff with the exchange rate
}
</script>
All of this works perfectly. So I went ahead and created some more code that registers today's exchange rate as the best whenever the user click the UPDATE button. I had this be registered in an XML file, as it's the most practical solution at this time.
So now I need to get the file read and the data parsed AND compared with the daily exchange rate data... This is where I hit a wall. In order to read the XML file I need an AJAX call and I can't have two separate functions with two separate AJAX calls. So the ideal thing would be to make a generic function with a generic AJAX call and just change the variables in each case... but the thing is I need to get both sets of data at the same time and compare them. I need to get the exchange rate of the day from Yahoo Currency and get the best recorded rate from that XML and then compare the two to be able to tell the user if the best rate needs updating to today's rate or not.
So far I've been at this over 5 hours and my head is about to explode. I've already lost track of what I've been doing and can't see any way out of this mess.
For what it's worth, this is the second AJAX function I need:
<script type="text/jscript">
function getbestexchange(exchangepair) {
$.ajax({
type: "GET" ,
url: "best"+exchangepair+".xml" ,
dataType: "xml" ,
success: function(xml) {
bestrate = $(xml).find('rate').text();
}
});
});
</script>
So what I would need is to compare this last function's resulting data passed through the bestrate variable with the first the successCallback() function's resulting data passed through the exchangerate variable.
If anyone out there could give me a hand and help me get to out of the problem of having to get data from both these places and then compare them, I would be greatly obliged!
EDIT: Following @guest271314's contribution and comments, I've created a jsfiddle to show you guys where I'm at. I've gone ahead and made the changes @guest271314 recommended but still I can't get this to work; it carries on failing at the .ajax()call for the XML file. The XML file is, however, up and running.
function doexchange(exchangepair) {
// added `return`
return $.ajax({
url: 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22' + exchangepair + '%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback='
}).then(successCallback);
}
function successCallback(responseObj) {
var stringObj = JSON.stringify(responseObj),
exchange = JSON && JSON.parse(stringObj) || $.parseJSON(stringObj),
exchangepair = exchange.query.results.rate.id,
exchangerate = parseFloat(exchange.query.results.rate.Rate).toFixed(2),
exchangedate = exchange.query.results.rate.Date;
$('#todaysrate').find('.pair').html(exchangepair);
$('#todaysrate').find('.rate').html(exchangerate);
$('#todaysrate').find('.date').html(exchangedate);
// added `return`
return exchangerate
}
function getbestexchange(exchangepair) {
// added `return`
return $.ajax({
type: "GET",
url: "http://chiennuperou.com/besthistoric" + exchangepair + ".xml",
dataType: "xml"
}).then(function(xml) {
alert('Hey, I\'m working!');
bestpair = $(xml).find('pair').text();
bestrate = $(xml).find('rate').text();
bestdate = $(xml).find('date').text();
$('#bestrate').find('.pair').html(bestpair);
$('#bestrate').find('.rate').html(bestrate);
$('#bestrate').find('.date').html(bestdate);
// added `return`
return bestrate
});
};
$.when(doexchange( /* value */ ), getbestexchange( /* value */ ))
.then(function(exc, bestexc) {
// do comparision stuff
console.log(exc[0], bestexc[0])
}, function err(jqxhr, textStatus, errorThrown) {
$('#error').html(errorThrown);
console.log(errorThrown)
})
$('#refresh').click(function() {
$('#todaysrate').find('.pair').html('. . .');
$('#todaysrate').find('.rate').html('. . .');
$('#todaysrate').find('.date').html('. . .');
$('#bestrate').find('.pair').html('. . .');
$('#bestrate').find('.rate').html('. . .');
$('#bestrate').find('.date').html('. . .');
$('#error').html('');
doexchange('USDEUR');
getbestexchange('USDEUR');
})
var exchangepair;
doexchange('USDEUR');
getbestexchange('USDEUR');span {
font-weight: bold;
color: #f00;
}
#refresh {
display: inline-block;
color: white;
background: gray;
padding: 5px 7px;
margin-top: 10px;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="todaysrate">Today's rate (<span class="date"></span>) for <span class="pair"></span> is 1.00/<span class="rate"></span>
</div>
<div id="bestrate">Best rate (<span class="date"></span>) for <span class="pair"></span> is 1.00/<span class="rate"></span>
</div>
<div id="error">
</div>
<div id="refresh">
Refresh
</div>
