另一个函数中的 Javascript forEach

Question

简介： 我对 JavaScript 有点陌生，需要一点帮助。我要做的是构建返回一串html，我需要在html表中引入一些变量。

问题： 我正在尝试执行 forEach 循环来收集我想输出的数据。我可以循环并让数据返回就好了，但是我的 forEach 循环在另一个函数中。

代码：

'<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>'...

抱歉，阅读起来有点困难。

功能：

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;
    });
}

那么，既然我收到了数据，如何将每个 str 作为字符串返回给调用它的字符串呢？

Answer 1

我建议为此目的使用reduce，因为这就是它的用途。

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;
    });
}

Answer 2

ncardeli 的回答已经很不错了。但是，如果您想将字符串作为数组获取，可以使用：

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;
}

Answer 3

您可以使用map 和join 来代替forEach 生成的数组：

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("");
}

Answer 4

您可以像这样在.forEach 之外声明变量

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;
}