NodeJS Controller function returns before data from API call and array.filter completes - node.js

Question

I'm working on a Slackbot that compares a repo branch file with the same file in Master, which requires making two API calls to bitbucket's API. The first grabs all the most recent branches in our workspace, which includes a URL that I can then use to call the API for the difference between the two files:
Snippet from NodeJS Controller File
let diffs = await axios.get('API-Call-To-BB-For-Recent-Branches', {
headers: {
'Authorization': `${AUTH}`
}
})
let filteredByUser = diffs.data.values.filter(element => {
if (element.target.author.raw.includes(username)) {
if (element.target.repository.full_name.includes("nameOfMasterBranch")) {
axios.get(element.target.links.diff.href, {
headers: {
'Authorization': `${AUTH}`
}
}).then(response => {
let clippedBranch = {
branch: element.name,
author: element.target.author.user.display_name,
diff: response.data
}
// Console Logging here shows the data I'm looking for
console.log(clippedBranch)
return clippedBranch
}).catch(error => {
console.log(error)
})
}
}
})
// Console logging Here returns an empty array.
console.log(filteredByUser)
// Console logging the returned value on the main server file returns a Promise<Pending>
return filteredByUser
What I've Tried
I've tried using a Promise.resolve and Promise.All to fix the issue.
Making the second API call inside of a for Of statement and a forEach statement
I've tried nesting the array processing and second API call inside of a .then on the first API call to BitBucket.
Whats preventing the data from being resolved in time to be returned?
Thanks in advance for your time!

Answer 1

Your problem is in the .filter loop. You are calling axios.get but not doing anything with the Promise it returns. The filter function should return true if the object is to be kept and false if not. But it returns nothing at all (which is equivalent to false. You might think it returns clippedBranch but it doesn't.
I suspect you want filteredByUser to be an array of clippedBranch objects, but it will end up being an empty array.
The following code will get you further:
let diffs = await axios.get("API-Call-To-BB-For-Recent-Branches", {
headers: {
Authorization: `${AUTH}`
}
});
const filteredByUser = [];
// use forEach instead of filter
diffs.data.values.forEach(async element => { // <--- use async to allow await
if (element.target.author.raw.includes(username)) {
if (element.target.repository.full_name.includes("nameOfMasterBranch")) {
const clippedBranch = await axios.get( // <--- wait for the result!
element.target.links.diff.href, {
headers: {
Authorization: `${AUTH}`
}
})
.then(response => {
let clippedBranch = {
branch: element.name,
author: element.target.author.user.display_name,
diff: response.data
};
// Console Logging here shows the data I'm looking for
console.log(clippedBranch);
return clippedBranch;
})
.catch(error => {
console.log(error);
});
if (clippedBranch) {
filteredByUser.push(clippedBranch); // <-- add to array if exists
}
}
}
});
Your original code didn't do anything with the value that was finally resolved by the axios.get(href). In fact those calls would complete long after your function ended since you didn't wait on them at all.
I used forEach instead of filter because we want to process each entry but not simply keep or discard it (which is what filter is for). We want to build a new array, so we just push the things we want onto it if found while looping through each entry.

Answer 2

You might want to chain calls to both .filter and .map separately. Not only will this "flatten" your code but it should read a bit easier as well. Use filter first to remove elements that you don't need. Then map through the resulting list and return a list of promises which can be passed to Promise.all
Here is what I believe you're attempting to do:
async function getBranchesByUsername(username) {
try {
const diffs = await axios.get("API-Call-To-BB-For-Recent-Branches", {
headers: {
Authorization: `${AUTH}`,
},
});
const requests = diffs.data.values
.filter(element => {
return element.target.author.raw.includes(username) &&
element.target.repository.full_name.includes("nameOfMasterBranch")
})
.map(element => {
return axios
.get(element.target.links.diff.href, {
headers: {
Authorization: `${AUTH}`,
},
})
.then((response) => {
const clippedBranch = {
branch: element.name,
author: element.target.author.user.display_name,
diff: response.data,
};
console.log(clippedBranch);
return clippedBranch;
});
});
return await Promise.all(requests)
} catch (error) {
console.log(error)
throw error
}
}
I have not been able to test this but the concept still applies