0

I have an array of currencies that I'd like to map out. But I'm not sure how? My app crashes with the code I wrote and returns an empty page with an error: currencyList.map is not a function

This is what I get when I console.log the fetched data:

AED: {currencyName: 'UAE Dirham', id: 'AED'}
AFN: {currencyName: 'Afghan Afghani', currencySymbol: '؋', id: 'AFN'}
ALL: {currencyName: 'Albanian Lek', currencySymbol: 'Lek', id: 'ALL'}
AMD: {currencyName: 'Armenian Dram', id: 'AMD'}
ANG: {currencyName: 'Netherlands Antillean Gulden', currencySymbol: 'ƒ', id: 'ANG'}
AOA: {currencyName: 'Angolan Kwanza', id: 'AOA'}

There are lots more entries there..

anyways this is my code

const [currencyList, setCurrencyList] = useState<any>();

  useEffect(() => {
    axios.get(listOfCurrencies)
    .then(res => {
      setCurrencyList(res.data['results']);
      console.log(res.data['results'])
    })
    .catch(error => {
      console.log("there was an error with connecting to database")
    })

  }, []);

return (
      <div>
        <h1> data will be here </h1>
          {currencyList && currencyList.map(curr => {
            return(
              <div>
                {curr}
              </div>
            )

          })}
      </div>
)
Improve this question
4
  • 2
    use map on Object.keys(currencyList ) or Object.entries(currencyList ) to map an object Commented Jun 29, 2022 at 10:27
  • 2
    Does this answer your question? How to map an Object? Commented Jun 29, 2022 at 10:28
  • 2
    That is because res.data['results'] is not array, but instead object with currency as keys. You should transform to array using Object.values(res.data['results'] and like that only object with structure like this {currencyName: 'UAE Dirham', id: 'AED'} will be in your array - basically only the values as method implies. Commented Jun 29, 2022 at 10:31
  • thanks to all of you guys - i got it figured out.. ! it turns out I reached my API limit and cannot develop anymore haha Commented Jun 29, 2022 at 10:34

2 Answers 2

Reset to default
0

If you want to get the values,

Object.values(currencyList) 
// You can save Object.values(res?.data?.results || {}) into the currencyList too, 
// e.g. setCurrencyList(Object.values(res?.data?.results || {})

then it will become an array with all the values object. If you want to map it and pass into a component,

Object.values(currencyList).map(currency => <Component item={currency} key={currency.id} />)
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

For what I understand, you have an object, not an array as response, kind of:

const currencyList = {
  AED: {currencyName: 'UAE Dirham', id: 'AED'}
  AFN: {currencyName: 'Afghan Afghani', currencySymbol: '؋', id: 'AFN'}
  ALL: {currencyName: 'Albanian Lek', currencySymbol: 'Lek', id: 'ALL'}
  AMD: {currencyName: 'Armenian Dram', id: 'AMD'}
  ANG: {currencyName: 'Netherlands Antillean Gulden', currencySymbol: 'ƒ', id: 'ANG'}
  AOA: {currencyName: 'Angolan Kwanza', id: 'AOA'}
}

So there's no map in objects. You'll need to get the keys, for example:

Object.keys(currencyList).map(
 key => <div>{currencyList[key].id}</div>
)
Improve this answer

Comments