API async function issue

Javascript Programming
#1

Hi, I’m having an issue with assigning the result of my async function to another variable. After assigning topTen() to topTenCoins, if I console.log(topTenCoins) it comes out looking like an array as I expect, but when I do typeof topTenCoins it tells me its an object. I then get an undefined result when attempting any operations treating topTenCoins as either an array or an object. Relevant code is below. Let me know if more context is needed. Thanks!

//Insert top ten coins from the list into button dropdown in a list format
let topTenCoins = topTen(); //Array of top ten token objects
console.log(topTenCoins); //Shows an array
console.log(typeof topTenCoins); // Shows object
console.log(topTenCoins[0]); //Shows undefined
let listOfLists = document.querySelectorAll(".topTenList"); //Combined From & To dropdown lists
for (let element of listOfLists) { // Two elements. From & To dropdown menus
  for (let i = 0; i < topTenCoins.length; i++) {
    element.innerHTML += `<li><a href="#">${topTenCoins[i].symbol}</a></li>`;
  }
}

//Call coinpaprika api to find token list
//Filter for top 10 coins
async function topTen() {
  try {
    let response = await fetch("https://api.coinpaprika.com/v1/coins"); //Returns an array of objects
    let tokens = await response.json();
    let ten = findTopTen(tokens); //Array with top 10 token objects
    return ten;
  } catch (e) {
    console.log(`Error: ${e}`);
  }
}

//Returns an array with the top 10 token objects
function findTopTen(tokens) {
  let ten = tokens.filter(token => token.rank < 11 && token.rank !== 0);
  return ten;
}
1 Like