stack_html += "<div class='co-stack-layer-title'>Application and Data" +
                        "<div class='row'>" +
                          response['Application and Data'].forEach(generateStackItem) + 
                        "</div>" +
                      "</div>";
stack_html += "<div class='co-stack-layer-title'>Business Tools" +
                        "<div class='row'>" +
                          response['Business Tools'].forEach(generateStackItem) + 
                        "</div>" +
                      "</div>";
stack_html += "<div class='co-stack-layer-title'>DevOps" +
                        "<div class='row'>" +
                          response['DevOps'].forEach(generateStackItem) + 
                        "</div>" +
                      "</div>";
stack_html += "<div class='co-stack-layer-title'>Utilities" +
                        "<div class='row'>" +
                          response['Utilities'].forEach(generateStackItem) + 
                        "</div>" +
                      "</div>";

function generateStackItem(element, index, array) {
    var stack_item_html = "";
    stack_item_html += "<div class='co-service'>" +
                     "<a href='" + element['canonical_url'] + "' class='each-service hint hint--top' data-hint='" + element['name'] + "' data-align='left'>" +
                       "<img src='" + element['image_url'] + "'>" +
                     "</a>" +
                   "</div>";

    console.log(stack_item_html);
    return stack_item_html;                       
}

I'm trying to use a forEach iteration on a javascript object, and it seems I cannot interpolate the return value into the string addition.

<div class='co-stack-layer-title'>Application and Data<div class='row'>undefined</div></div><div class='co-stack-layer-title'>Business Tools<div class='row'>undefined</div></div><div class='co-stack-layer-title'>DevOps<div class='row'>undefined</div></div><div class='co-stack-layer-title'>Utilities<div class='row'>undefined</div></div>

stack_html += "<div class='co-stack-layer-title'>Application and Data" +
                        "<div class='row'>" +
                          response['Application and Data'].forEach(generateStackItem) + 
                        "</div>" +
                      "</div>";
stack_html += "<div class='co-stack-layer-title'>Business Tools" +
                        "<div class='row'>" +
                          response['Business Tools'].forEach(generateStackItem) + 
                        "</div>" +
                      "</div>";
stack_html += "<div class='co-stack-layer-title'>DevOps" +
                        "<div class='row'>" +
                          response['DevOps'].forEach(generateStackItem) + 
                        "</div>" +
                      "</div>";
stack_html += "<div class='co-stack-layer-title'>Utilities" +
                        "<div class='row'>" +
                          response['Utilities'].forEach(generateStackItem) + 
                        "</div>" +
                      "</div>";

function generateStackItem(element, index, array) {
    var stack_item_html = "";
    stack_item_html += "<div class='co-service'>" +
                     "<a href='" + element['canonical_url'] + "' class='each-service hint hint--top' data-hint='" + element['name'] + "' data-align='left'>" +
                       "<img src='" + element['image_url'] + "'>" +
                     "</a>" +
                   "</div>";

    console.log(stack_item_html);
    return stack_item_html;                       
}

I'm trying to use a forEach iteration on a javascript object, and it seems I cannot interpolate the return value into the string addition.

<div class='co-stack-layer-title'>Application and Data<div class='row'>undefined</div></div><div class='co-stack-layer-title'>Business Tools<div class='row'>undefined</div></div><div class='co-stack-layer-title'>DevOps<div class='row'>undefined</div></div><div class='co-stack-layer-title'>Utilities<div class='row'>undefined</div></div>

• javascript
• json
• object
• foreach

• How does the response you are using look like? What do you want to do with generateStackItem? – Danmoreng Commented Oct 22, 2015 at 15:59

3 Answers 3

forEach returns undefined. Use map+join.

"abc" + response['Utilities'].map(generateStackItem).join("") + "def";

When your array is empty, the forEach function will return undefined, e.g.you will get an undefined when you call forEach like this [].forEach(generateStackItem), so check if your response['Application and Data'] is an empty array.

From mozilla

forEach() executes the callback function once for each array element; unlike map() or reduce() it always returns the value undefined and is not chainable. The typical use case is to execute side effects at the end of a chain.

It's mon mistake to use return inside forEach in this way but it will not work. You may want to look at map