Javascript forEach inside another function

Question

INTRO: I am kinda new to JavaScript and need a little help. What I am trying to do is build is return a string of html, and I need to introduce some variables into a html table.

PROBLEM: I am trying to do forEach loop to collect data I would like to output. I can loop through and get the data to return just fine, however I have my forEach loop inside another function.

Code:

'<table>' +
      '<tr><th>Product Details:</th><th></th><th></th><th></th></tr>' +
     '<tr><th>Product</th><th>Manufacture Site</th><th>Business</th><th>Hazmat #</th><th>MSDS</th></tr>' +
     myFunction() +


  '</table>'...

Sorry that it's a little hard to read.

Function:

function myFunction() {
    productDetailsGrid.items.forEach(function(item) {
        var prod = item.data.Product;
        var sites= item.data.Sites;
        var mSDSID = item.data.MSDSID;
        var msdsLink = item.data.MSDSLink;
        var bus = item.data.Business;
        var hazMatNumber = item.data.HazMatNumber
        var str = '<tr><th>' + prod + '</th><th>' + sites+ '</th><th>' + bus + '</th><th>' + hazMatNumber + '</th><th><a href="' + msdsLink + '">' + mSDSID + '</a></th></tr>';
        return str;
    });
}

So, since I receive the data, how can I return each str as a string to the string that calls it?

place the var str = "" at the beginning of myFunction, then do -> str += ... inside your forEach, and then place return str inside you myFunction.. — Keith
– Keith, Commented Oct 26, 2017 at 13:22

ncardeli · Accepted Answer · 2017-10-26 13:25:35Z

3

Instead of forEach you can use map and join the resulting array:

function myFunction() {
    return productDetailsGrid.items.map(function (item) {
        var prod = item.data.Product;
        var sites = item.data.Sites;
        var mSDSID = item.data.MSDSID;
        var msdsLink = item.data.MSDSLink;
        var bus = item.data.Business;
        var hazMatNumber = item.data.HazMatNumber
        return '<tr><th>' + prod + '</th><th>' + sites + '</th><th>' + bus + '</th><th>' + hazMatNumber + '</th><th><a href="' + msdsLink + '">' + mSDSID + '</a></th></tr>';
    }).join("");
}

answered Oct 26, 2017 at 13:25

ncardeli

3,5022 gold badges25 silver badges27 bronze badges

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

3 Comments

Keith Over a year ago

This is also a good answer,. Amazing how many ways you can skin a cat with coding. One advantage here could potentially be performance. Doing array.join("") from what I can remember can have a performance gain on str += ..

ncardeli Over a year ago

@Keith the performance debate between join and concat is very interesting. I think it depends on the length of the array and if you already have the array or if you have to create it and then join it. Take a look at this answer and its comments: stackoverflow.com/a/7296616/463242

Keith Over a year ago

@ncardeli Yeah, good point. I must admit it's been a while since I looked at this sort of stuff. Modern JS Engines are pretty good at optimising stuff without help. String handling has most likely come a long way since I last looked.

George · Accepted Answer · 2017-10-26 13:23:48Z

3

You could just declare the variable outside of the .forEach like so

function myFunction() {
    var str = "";
    productDetailsGrid.items.forEach(function (item) {
        var prod = item.data.Product;
        var sites = item.data.Sites;
        var mSDSID = item.data.MSDSID;
        var msdsLink = item.data.MSDSLink;
        var bus = item.data.Business;
        var hazMatNumber = item.data.HazMatNumber
        str += '<tr><th>' + prod + '</th><th>' + sites + '</th><th>' + bus + '</th><th>' + hazMatNumber + '</th><th><a href="' + msdsLink + '">' + mSDSID + '</a></th></tr>';
    });
    return str;
}

edited Oct 26, 2017 at 13:23

answered Oct 26, 2017 at 13:22

George

6,7592 gold badges31 silver badges36 bronze badges

5 Comments

TigerDave Over a year ago

Awesome! Thanks, that solution is just basic programming... its funny when you stare at something for so long you over complicate it. :) Appreciate it!

TigerDave Over a year ago

I do have one more issue. I am getting an 'Undefined' when I add it to the table from the original function call. Any ideas? Product Details: undefined Product

George Over a year ago

I'd debug inside of the .forEach to see what data you have

Keith Over a year ago

@TigerDave I assume you did that before George's edit, it was var str instead of var str = "".. Thats why it say's undefined Product

George Over a year ago

Or what @Keith said. (Thanks for pointing that issue out btw, it's much appreciated)

guramidev · Accepted Answer · 2017-10-26 13:30:40Z

3

I would advice to use reduce for that purpose since that's what it is for.

function myFunction() {
    return productDetailsGrid.items.reduce(function(str, item) {
        var prod = item.data.Product;
        var sites= item.data.Sites;
        var mSDSID = item.data.MSDSID;
        var msdsLink = item.data.MSDSLink;
        var bus = item.data.Business;
        var hazMatNumber = item.data.HazMatNumber
        str += '<tr><th>' + prod + '</th><th>' + sites+ '</th><th>' + bus + '</th><th>' + hazMatNumber + '</th><th><a href="' + msdsLink + '">' + mSDSID + '</a></th></tr>';
        return str;
    });
}

edited Oct 26, 2017 at 13:30

answered Oct 26, 2017 at 13:24

guramidev

2,2381 gold badge17 silver badges19 bronze badges

4 Comments

Keith Over a year ago

Reduce is a good idea here, you can even remove the initialise.. As if not supplied will take the first item anyway.. eg. ["hello"," ","there"].reduce((str, item) => str += item) will return "hello there"..

Keith Over a year ago

Nice one, I already up-voted before that change, as I think reduce is the best answer here.

TigerDave Over a year ago

reduce is not returning all the data, it actually returns one less then selected.

guramidev Over a year ago

That's pretty weird because ['t', 'e', 's', 't'].reduce((str, el) => { return str + el }) === 'test'

Spitzbueb · Accepted Answer · 2017-10-26 13:27:22Z

ncardeli's answer is already pretty good. However, if you want to get the strings as an array you can use this:

var items = [
  {
    data: {
      Product: "Product",
      Sites: "Sites",
      MSDSID: "MSDSID",
      MSDSLink: "MSDSLink",
      Business: "Business",
      HazMatNumber: "HazMatNumber"
    }
  },
  {
    data: {
      Product: "Product2",
      Sites: "Sites2",
      MSDSID: "MSDSID2",
      MSDSLink: "MSDSLink2",
      Business: "Business2",
      HazMatNumber: "HazMatNumber2"
    }
  }
]

console.log(myFunction());

function myFunction() {
    var arr = [];
    items.forEach(function(item) {
        var prod = item.data.Product;
        var sites= item.data.Sites;
        var mSDSID = item.data.MSDSID;
        var msdsLink = item.data.MSDSLink;
        var bus = item.data.Business;
        var hazMatNumber = item.data.HazMatNumber
        var str = '<tr><th>' + prod + '</th><th>' + sites+ '</th><th>' + bus + '</th><th>' + hazMatNumber + '</th><th><a href="' + msdsLink + '">' + mSDSID + '</a></th></tr>';
        arr.push(str);
    });
    return arr;
}

Collectives™ on Stack Overflow

Javascript forEach inside another function

4 Answers 4

3 Comments

5 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

5 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related