Every time the page is refreshed, there seems to be a problem with how the fund names are arranged. They should always be displayed in the order fundI, fundII, fundIII, and so on no matter how many times the page is reloaded.
I've experimented with different styles but have not been able to find a solution. Everything looks good except for the issue of the arrangement mismatch.
Below is my code snippet:
$(document).ready(function () {
$.ajax({
type: 'GET',
url: 'http://datarecapture.premiumpension.com:8089/api/Prices/GetAllFundNames',
contentType: "application/json"
}).done(function(data) {
$.each(data.result, function(i, ele) {
var detail = {};
detail.id = ele.FUND_ID;
detail.name = ele.FUND_NAME;
$.ajax({
type: 'GET',
url: 'http://datarecapture.premiumpension.com:8089/api/Prices/GetCurrentFundPrice?fundId=' + ele.FUND_ID
}).done(function(data) {
console.log(data.result);
var sortedData = data.result;
sortedData.sort(function(a, b){return a-b});
var id = data.result.FundID;
detail.price = data.result.UnitPrice;
var tile = buildTile(detail);
$('#tile-holder').append(tile);
})
})
});
function buildTile(detail) {
detail.sort
return '<ul style="list-style: none;">'
+ '<li>' + detail.name + '</li>'
+ '<li>' + detail.price + '</li>'
+ '<li><a href="#">View History</a></li>'
+ '</ul><hr>';
}
});