How to fix 'TypeError: (images || []).forEach is not a function'

Question

Within Node.js (MS Bot Framework is being used), I'm trying to iterate over an array containing multiple objects that was returned by fetch() . It does one iteration and then throws an error.

I did already take node-fetch out of the equation and used a static array of my objects. I also tried converting to an array. Still the same result: TypeError: (images || []).forEach is not a function after the first iteration went perfectly well.

This is what it looks like at the moment (shortened object values for readability):

// exact copy of what fetch returns
let test = [
    {
        title: 'Power BI Desktop—Interactive Reports | Microsoft Power BI',
        link: 'https://support.office.com/',
        description: 'Create interactive reports with data',
        thumbnail: 'https://powerbi.microsoft.com/'
    }, {
        title: 'What is Power BI administration? - Power BI',
        link: 'https://support.office.com/',
        description: 'Learn about the configuration of Power BI ',
        thumbnail: 'https://docs.microsoft.com/'
    }, {
        title: 'Add a PowerBI tab to Teams',
        link: 'https://support.office.com/',
        description: 'You can add a new or existing PowerBI',
        thumbnail: 'https://support.office.com/'
    }
];

let cardContent = [];
test.forEach(element => {
    logger.debug('working on: %j', element);
    let card = CardFactory.heroCard(
        element.title,
        element.description,
        element.thumbnail,
        [element.link],
        ['Open Item']
    );
    cardContent.push(card);
});

Just for reference, here is part of my fetch function:

return fetch(url + question)
    .then(res => res.json())
    .then(jsonResponse => {
        return jsonResponse;
    })

I really don't know what else to try now. The exact same setup worked on a legacy version of my application - only with axios but I tried that as well.

Answer 1

I run your code and it works - this mean that test array doesn't contains what do you think it contains (probably it contains Promise returned by fetch() ). Use fetch with await keyword to get response and again use await to get json (something like code below - I write it form head)

async function load(url, question) {
    ...
    return await (await fetch(url + question)).json()
}

...
test = await load(url, question) // this call shoud be also inside async function

Answer 2

It's not possible to tell with certainty why (images || []).forEach is not a function without knowing where/how images is defined, but I'm going to hazard a guess and say images exists , and is an object instead of an array.

Try executing

const images = {};
images.forEach(image => console.log(image))

And you'll see the same result, Uncaught TypeError: images.forEach is not a function .

Maybe it is the images.data field within the object that you want to run forEach on.