Trying to get API data to fill select item

Question

I am trying to make an API call, return a list of currencies and then populate a select menu with this list however I cannot seem to do anything with the data I have returned. I can store it in an array but not console log it, use a loop to iterate through it or anything

this is the data I am getting back https://free.currencyconverterapi.com/api/v6/currencies

here is the repo for my project if you need to see the whole thing https://github.com/martincavaliers/myCurrencyConverter/tree/apiIntegrationJquery

Only a beginner with API's but I feel it is something do with the nesting of the returned objects

Any help would be greatly appreciated

Answer 1 · 2018-09-20T23:29:49Z

September 20, 2018 11:29pm

Hi Martin,

Looks like you have a syntax error in your index.html

<script src = "app.js"></script>

Should be:

<script src="app.js"></script>

If you change that, and then uncomment console.log(data); on line 14 of app.js. You should see the data being returned.

Hope this helps :)

Answer 2 · 2018-09-21T22:07:30Z

September 21, 2018 10:07pm

Hi Martin,

Sorry I thought you meant you couldn't console.log it.

Important to note that the data we want is 4 levels deep. For example, to access the currency name we could do:

    data.results.currency.currencyName

With that in mind, you could try something like:

function createArray(api, array) {
    $.getJSON(api, function(data) {

        console.log(data.results);
        // Loop over each item within data.results. 
        $.each(data.results, function(index, currency) {

            // console.log("currency: ", currency);

            // Create a new option tag with currency name as the value attribute
            var currencyOption = '<option value="' + currency.currencyName + '">';

            // If theres a currency symbol, use it.
            if (currency.currencySymbol) {
                currencyOption += currency.currencySymbol;
                currencyOption += ' ';
            }

            // Add currency name + close tag
            currencyOption += currency.currencyName;
            currencyOption += '</option>';

            // Append currencyOption tag to #currentCurrencyType select
            $('#currentCurrencyType').append(currencyOption);


        });
    })
}

The code is saying:

Loop over each currency within data.results.

Then construct a HTML option tag using the currencyName and, if it exists, the currencySymbol.

Finally, append the option to the #currentCurrencyType select element.

Uncomment the console.log's so you can see what's happening.

See jQuery each()

Hope this helps :)

Welcome to the Treehouse Community

Looking to learn something new?

Martin Coutts

Martin Coutts

Trying to get API data to fill select item

2 Answers

James Anwyl

James Anwyl

Martin Coutts

Martin Coutts

James Anwyl

James Anwyl