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

admin管理员组

文章数量:1022726

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: '/',
        description: 'Create interactive reports with data',
        thumbnail: '/'
    }, {
        title: 'What is Power BI administration? - Power BI',
        link: '/',
        description: 'Learn about the configuration of Power BI ',
        thumbnail: '/'
    }, {
        title: 'Add a PowerBI tab to Teams',
        link: '/',
        description: 'You can add a new or existing PowerBI',
        thumbnail: '/'
    }
];

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.

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./',
        description: 'Create interactive reports with data',
        thumbnail: 'https://powerbi.microsoft./'
    }, {
        title: 'What is Power BI administration? - Power BI',
        link: 'https://support.office./',
        description: 'Learn about the configuration of Power BI ',
        thumbnail: 'https://learn.microsoft./'
    }, {
        title: 'Add a PowerBI tab to Teams',
        link: 'https://support.office./',
        description: 'You can add a new or existing PowerBI',
        thumbnail: 'https://support.office./'
    }
];

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.

• javascript
• arrays
• node.js
• botframework

Share Improve this question Follow edited Apr 9, 2019 at 22:22 Kamil Kiełczewski 93k3434 gold badges395395 silver badges370370 bronze badges asked Apr 9, 2019 at 21:56 MalteMalte 5311 silver badge44 bronze badges 5

• 8 (images || []).forEach is not anywhere in the code you posted...? – CertainPerformance Commented Apr 9, 2019 at 21:56
• If that's the error you get, evidently images is truthy but not an array. Maybe consider developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – jonrsharpe Commented Apr 9, 2019 at 21:57
• What fetch function are you talking of? You're not using promises anywhere in the code you posted. – Bergi Commented Apr 9, 2019 at 21:57
• @CertainPerformance Exactly, which is why I'm pletely stumped as to where that error es from. I've dug a bit deeper into the source of Bot Framework and it appears to be a bug in their CardFactory. – Malte Commented Apr 10, 2019 at 9:28
• Cause found: The documentation states you can send image URLs as a string. However, they have to be in an array: (images || []).forEach((img: (CardImage | string)). That is where the error came from. Sadly, bot frameworks documentation is lackluster in places. – Malte Commented Apr 10, 2019 at 9:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

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.

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: '/',
        description: 'Create interactive reports with data',
        thumbnail: '/'
    }, {
        title: 'What is Power BI administration? - Power BI',
        link: '/',
        description: 'Learn about the configuration of Power BI ',
        thumbnail: '/'
    }, {
        title: 'Add a PowerBI tab to Teams',
        link: '/',
        description: 'You can add a new or existing PowerBI',
        thumbnail: '/'
    }
];

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.

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./',
        description: 'Create interactive reports with data',
        thumbnail: 'https://powerbi.microsoft./'
    }, {
        title: 'What is Power BI administration? - Power BI',
        link: 'https://support.office./',
        description: 'Learn about the configuration of Power BI ',
        thumbnail: 'https://learn.microsoft./'
    }, {
        title: 'Add a PowerBI tab to Teams',
        link: 'https://support.office./',
        description: 'You can add a new or existing PowerBI',
        thumbnail: 'https://support.office./'
    }
];

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.

• javascript
• arrays
• node.js
• botframework

Share Improve this question Follow edited Apr 9, 2019 at 22:22 Kamil Kiełczewski 93k3434 gold badges395395 silver badges370370 bronze badges asked Apr 9, 2019 at 21:56 MalteMalte 5311 silver badge44 bronze badges 5

• 8 (images || []).forEach is not anywhere in the code you posted...? – CertainPerformance Commented Apr 9, 2019 at 21:56
• If that's the error you get, evidently images is truthy but not an array. Maybe consider developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – jonrsharpe Commented Apr 9, 2019 at 21:57
• What fetch function are you talking of? You're not using promises anywhere in the code you posted. – Bergi Commented Apr 9, 2019 at 21:57
• @CertainPerformance Exactly, which is why I'm pletely stumped as to where that error es from. I've dug a bit deeper into the source of Bot Framework and it appears to be a bug in their CardFactory. – Malte Commented Apr 10, 2019 at 9:28
• Cause found: The documentation states you can send image URLs as a string. However, they have to be in an array: (images || []).forEach((img: (CardImage | string)). That is where the error came from. Sadly, bot frameworks documentation is lackluster in places. – Malte Commented Apr 10, 2019 at 9:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

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.

本文标签： javascriptHow to fix 39TypeError (images)forEach is not a function39Stack Overflow