Return Isn't Occuring In JavaScript forEach Function?

Question

I'm using the DocxJS package to create a document. Inside my document, I'm trying to create a function that will iterate over some front-end props and create multiple paragraphs for each object inside the array. Whenever I iterate over the array and console.log it, it's working properly. When I do the same thing and try to use the return statement to write the "new Paragraph" as it states in the documentation, it's not working properly and returns nothing.

Here is the package and documentation: Package: https://www.npmjs.com/package/docx Documentation: https://docx.js.org/#/

My array markup looks like this:

[{item}, {item}, {item}]

The objects inside the array are:

{item.value, item.description, item.tags}

Here is the function I've created:

const createItem = () => {
    let itemArray = this.props.goods.products.items;
    console.log(itemArray);

    // This will properly console.log the item description for each one (3 total)
    itemArray.forEach((item) => {
        console.log(item.description);
    })

    // This doesn't return anything, but the console.log DOES return the item descriptions like before
    itemArray.forEach((item) => {
         return new Paragraph({
             text: `${item.description}`,
             alignment: AlignmentType.CENTER,
             style: 'educationDegree'
         }, console.log(item.description));
    })
}

Later on in my document that I'm creating with the docx package, I'm just calling the function like this: createItem()

I've tried passing in, createItem(this.props.goods.products.items) but it does nothing. I've tried doing: this.createItem(this.props.goods.products.items) and it just returns that this.createItem is not a function.

I just can't figure out why this isn't working properly and returning the item.description for each item as it iterates over the array? Currently it returns nothing but the console logs I'm requesting.

Think about what function return new Paragraph({ is happening inside. And note how you're using forEach, not map. — Carcigenicate
– Carcigenicate, Commented Nov 18, 2019 at 18:43
The .forEach() method ignores values returned from the callback. — Pointy
– Pointy, Commented Nov 18, 2019 at 18:47
What are you trying to do? .map() will create a new array from the contents (modified by the callback) of an existing array. — Pointy
– Pointy, Commented Nov 18, 2019 at 18:49
@Buckyx55 No, what I meant is that the return is not happening inside createItem; it's happening inside the lambda that you pass to foreach. You can't return from an outer function inside an inner function. I think you might want to change the foreach to a map, then do return itemArray.map((item) =>... — Carcigenicate
– Carcigenicate, Commented Nov 18, 2019 at 18:50
And from createItem you want to return an array of paragraphs? Then you want map. — deceze
– deceze ♦, Commented Nov 18, 2019 at 18:52

Chris GW Green · Accepted Answer · 2019-11-18 19:23:00Z

2

Something like this should work for you:

const itemArray = [{description: 'Lorem ipsum'}, {description: 'Lorem ipsum'}]

const AlignmentType = {
   CENTER: 'center'
}

class Paragraph {
  constructor(text, alignment, style) {
    this.text = text
      this.alignment = alignment
      this.style = style
  }
}

const paragraphArray = itemArray.reduce((acc, item) => [...acc, new Paragraph(item.description, AlignmentType.CENTER, 'educationDegree')],[])

answered Nov 18, 2019 at 19:23

Chris GW Green

1,20711 silver badges17 bronze badges

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

1 Comment

Buckyx55 Over a year ago

Thanks for the answer. When I console.log(paragraphArray), it's properly showing the paragraphs in the array, but when I download the word doc it's not showing anything. Do I have to return the array in the document markup somehow or in the function after you've created the paragraphArray? Thank you for your help!

pavan kumar · Accepted Answer · 2019-11-18 19:07:15Z

0

Array.prototype.forEach() always returns void no matter what use Array.prototype.reduce() or write a custom function that takes in an array and returns a new array(not a reference to the one you passed) you can refer mdn MDN Array

you can see that return value for forEach is always undefined mentioned in docs I suggest you use Array.prototype.reduce()

   let resArr = itemArray.reduce((acc,item) =>{
             let para = new Paragraph({
                 text: `${item.description}`,
                 alignment: AlignmentType.CENTER,
                 style: 'educationDegree'
             })
             acc.push(para)
             return acc;
        },[]);

it is good practice to get new object instead of mutating existing referenced object so thought this would help.

edited Nov 18, 2019 at 19:07

answered Nov 18, 2019 at 18:57

pavan kumar

8236 silver badges15 bronze badges

1 Comment

pavan kumar Over a year ago

hey sorry did not see that yup i meant to use reduce not map i was going through the comments and missed that, thanks for reminding me i will correct it

Collectives™ on Stack Overflow

Return Isn't Occuring In JavaScript forEach Function?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related