0

I'm trying to set up a currency converter application for a web page. I'm using an API and the response I get are the variables in alphabetical order, but I'm understanding that using a for...in loop will arbitrarily get me the variables I'm looking for. Is there a way to order them alphabetically after I get them while keeping the same for...in structure?

function loadCurrency(){
    let from = document.getElementById('from');
    let to = document.getElementById('to');
    let xHttp = new XMLHttpRequest();
    xHttp.onreadystatechange = function(){
        if(xHttp.readyState === 4 && xHttp.status === 200) {
            let obj = JSON.parse(this.responseText);
            let options = '';
            for(key in obj.rates){
                options = options+'<option>'+key+'</option>';
            }
            from.innerHTML = options;
            to.innerHTML = options;
        }
    };
    xHttp.open('GET','https://api.exchangeratesapi.io/latest',true);
    xHttp.send();
}
Odyss
  • 1
  • 2
  • 1
    What is `obj.rates`? An object? – nicholaswmin Jan 30 '19 at 12:33
  • 1
    `for...in` will get you the *properties* of an object. Object properties, in turn, have no inherent ordering. Iterating through them guarantees you don't get duplicates but nothing else. The problem isn't `for...in` but JS objects. – VLAZ Jan 30 '19 at 12:33
  • Yes Nik, it's an object that holds the variables I'm trying to list. – Odyss Jan 30 '19 at 12:38
  • If rates is an array, just use `array.sort()`. if it's an object, you need to use `Object.keys().sort()` and use forEach on that resulting array to force you to pick out the properties in order. Also think about switching to using arrays if sorting and order matters. Collections are way easier to work with when they are arrays containing objects or values instead of objects containing arrays or other objects, since you have access to all the array methods then. – Shilly Jan 30 '19 at 12:40

3 Answers3

1

Sort JavaScript object by key

Please check out the above link. It had the same issue. Basically, it extracted all keys of object into an array and then sorted it and used it one by one. The same can work for you as well.

Rajat Raj
  • 13
  • 2
0

You can sort the list of currencies, alphabetically by the name (Assuming objs.rates has a property name) before the for..in

function compare(a,b) {
  if (a.name < b.name)
    return -1;
  if (a.name > b.name)
    return 1;
  return 0;
}

objs.rates.sort(compare);
IrishJS
  • 11
  • 5
0

If you're trying to generate array of options for your select element, I'd do that slightly different:

var rates = {
  USD: 1,
  GBP: 0.78,
  EUR: 0.87
};

var options = Object.keys(rates).sort().reduce((options, currency) => options+=`<option value="${currency}">${currency}</option>`, this[0]);

document.querySelector('#currencies').innerHTML = options;
<select id="currencies"></select>
  • This worked like a charm in terms of sorting the list alphabetically. However, the issue I'm having now is that the `from` and `to` select tags have the length equal to 0, and because of it, I can't replace those two variables in the API URL, making it unable to properly convert the currencies. – Odyss Jan 30 '19 at 13:07
  • I have managed based on your code to solve that issue as well. Took a bit of fiddling and debugging to know what and where goes wrong, but managed in the end. Thank you again for your reply! – Odyss Jan 30 '19 at 13:43