so i have a function that returns array of matchIds. And i have a function that returns object of data from the macth based on the matchID
async function getMatchData(matchId){
const response = await fetch(`https://europe.api.riotgames.com/lol/match/v5/matches/${matchId}?api_key=`+key);
var data = await response.json();
let matchData= {
teams: data.info.teams.map(element => team = { teamid: element.teamId, win: element.win }),
players: data.info.participants.map(element => obj = { team: element.teamId, champ: element.championName, champIcon: element.championName + '_0.jpg', summoner: element.summonerName, level: element.champLevel, build: { item1: element.item1, item2: element.item2, item3: element.item3, item4: element.item4, item5: element.item5, item6: element.item6, item0: element.item0 }, kills: element.kills, deaths: element.deaths, assists: element.assists, kda: (element.kills + element.assists) / element.deaths, cs: element.totalMinionsKilled + element.neutralMinionsKilled, victory: element.win })
}
return matchData
now i want to use each matchId from the matchIds array as a parameter in the getMatchData function and put each response in an array or object
i tried to run thru the array with map but it returns [ Promise { }, Promise { }, ... ] and says: Cannot read properties of undefined (reading 'teams')
let matchHistoryData= matches.map(element=>getMatchData(element))
console.log(matchHistoryData);
matches being the array of matchIds
Your question changed, so here is the answer to the updated question:
As getMatchesData
is an async
function, it is guaranteed to return a promise object. By consequence, the .map()
call is bound to return an array of promises.
As these promises will only resolve in some future -- when these await
-ed promises resolve, and matchData
assignments get executed -- you'll need to listen in with asynchronous code to be executed when they do. You can use Promise.all
for this:
Promise.all(matches.map(element=>getMatchData(element)))
.then(matchHistoryData => {
console.log(matchHistoryData);
});
Note that any other code that needs matchHistoryData
will need to run inside that then
callback, or else be called from there (or be chained in yet another then
callback,...).
In comments you have presented code that wraps the code in a logData
function. This doesn't take away the fact that the response data is only available in the future, so logData
cannot possibly return that future data now. You have to stick with the asynchronous way of programming, and have your code executed in the future, when the promise resolves:
async function logData(sum){
let name = sum;
let puuid = await getPUUID(name);
let matches = await getMatchIds(puuid);
return Promise.all(matches.map(element => getMatchData(element)));
}
logData('Ī¤hePrideStalker').then(matchHistoryData => {
console.log(matchHistoryData);
/*
All code that needs the values in matchHistoryData should
be placed within this callback -- not outside of it.
...your code comes here...
*/
});
/* No code comes here that needs the results, because the results are not there yet */