Unable to use async await in array filter

Question

Unable to use async-await in array filter!

I tried to create array and iterate using filter to add if a response is success

var awardCodes = [1, 2, 3, 11];

function getPosts() {
    const response = fetch("https://jsonplaceholder.typicode.com/user");
    return response;
}

function test(awardCodes) {
    var arr = awardCodes.filter(checkCode);
    console.log(arr, awardCodes);
}

var checkCode = async (code) => {
    try {
        let res = await getPosts();
        if (res.status == 200) {
            console.log("true");
            return true;
        } else {
            console.log("false1");
            return false;
        }
    } catch (error) {
        console.log("false2");
        return false;
    }
    console.log("false3");
    return false;
}

test(awardCodes);

I expect the output to be an empty array

You give .filter an async function, which always returns a Promise. — VLAZ
– VLAZ, Commented Oct 9, 2019 at 14:49
Yes, filter, map, forEach etc. Are all calback functions that don't understand Promises. Just use for of etc instead. — Keith
– Keith, Commented Oct 9, 2019 at 14:49
That checkCode predicate doesn't even make much sense - it takes code as parameter but never uses it within the body. What is the intention here? — VLAZ
– VLAZ, Commented Oct 9, 2019 at 14:55

nanobar · Accepted Answer · 2019-10-09 15:16:38Z

3

Filter won't wait for your promises to resolve before filtering. Use Promise.all or Promise.allSettled to make your requests in parallel, once they are all done check if the codes are all valid, e.g:

const awardCodes = [1, 2, 3, 11];

async function filterValidCodes(awardCodes) {
  const responses = await Promise.all(
    awardCodes.map(code => fetch(`https://checkcode.com/${code}`))
  );

  return awardCodes.filter((_, i) => responses[i].status === 200);
}

(async () => {
  const validCodes = await filterValidCodes(awardCodes);
})();

It would be simpler and much more efficient to pass the codes as an array to the service though.

edited Oct 9, 2019 at 15:16

answered Oct 9, 2019 at 14:57

nanobar

66.8k26 gold badges155 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kiranbabu Over a year ago

how to modify awardCodes based on each fetch call if fetch is success i want that element to be in awardCodes else it should be removed

Collectives™ on Stack Overflow

Unable to use async await in array filter

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related