Map returning only first element

Question

const list= ['razxDUgYGNAdQ', 'Qwsogvtv82FCd']

const options = {
    method: 'GET',
    headers: {
        'X-RapidAPI-Key': 'f4f0f6d3c8msh5e07811ecc90234p121a8djsnf83076cfce98',
        'X-RapidAPI-Host': 'coinranking1.p.rapidapi.com'
    }
};

fetch(`https://coinranking1.p.rapidapi.com/coins?referenceCurrencyUuid=yhjMzLPhuIDl&timePeriod=24h&${list.map((coin, index) => `uuids[${index}]=${coin}&`)}tiers[0]=1&orderBy=marketCap&orderDirection=desc&limit=50&offset=0`, options)
    .then(response => response.json())
    .then(response => console.log(response))
    .catch(err => console.error(err));

In the code above, there are 2 items in the list array. And the API fetches data for these 2 items(uuids) but I'm getting the result only for first element And if I do it manually without using map it is working fine but there could be many more items in the array so I can't do it manually.

How do you do it manually? Are you aware that `.map()` returns an array, and that when you use string interpolation, that this array is converted into a string, adding comma's between every element? — Ivar, Jul 21 '22 at 17:20
By doing manually means suppose the array has 10 items, so in that case writing the ```uuids[index]={item}``` 10 times without using any method. — Yash Sharma, Jul 21 '22 at 17:22
Ohh, so the problem here is the comma between those items. How can i just remove them. — Yash Sharma, Jul 21 '22 at 17:23

score 1 · Answer 1 · answered Jul 21 '22 at 17:23

First of all, you publicly leaked api key here, which is probably not a good idea.

You are missing join('') after map:

const list= ['razxDUgYGNAdQ', 'Qwsogvtv82FCd']

const options = {
    method: 'GET',
    headers: {
        'X-RapidAPI-Key': 'f4f0f6d3c8msh5e07811ecc90234p121a8djsnf83076cfce98',
        'X-RapidAPI-Host': 'coinranking1.p.rapidapi.com'
    }
};

fetch(`https://coinranking1.p.rapidapi.com/coins?referenceCurrencyUuid=yhjMzLPhuIDl&timePeriod=24h&${list.map((coin, index) => `uuids[${index}]=${coin}&`).join('')}tiers[0]=1&orderBy=marketCap&orderDirection=desc&limit=50&offset=0`, options)
    .then(response => response.json())
    .then(response => console.log(response))
    .catch(err => console.error(err));

.as-console-wrapper { max-height: 100% !important; top: 0; } /* ignore this */

score 0 · Answer 2 · answered Jul 21 '22 at 17:23

This is below the js map function returns back an array. so your code would end up producing something like, ['uuids[0]= razxDUgYGNAdQ&', 'uuids[1]= Qwsogvtv82FCd&']

what you instead is a reduce function

// example
list.reduce((perv, curr, index) => perv + `uuids[${index}]=${curr}&`, '')

Map returning only first element

2 Answers2