为什么使用.map()来尝试构建一个不起作用的html表？

Question

我想通过将JSON传递给.map()然后将其作为子项附加到主表来生成表.正如您将在下面看到的,当您运行代码时,它会将我的连接和字符串附加到表中.它不会创建实际的行和单元格.感谢您的任何帮助,您可以提供.

var data = {
  'results': [
    {
      'firstName': 'John',
      'lastName': 'Doe',
      'email': 'jdoe@mail.com'
    },
    {
      'firstName': 'Luke',
      'lastName': 'Doe',
      'email': 'loe@mail.com'
    },
    {
      'firstName': 'Sarah',
      'lastName': 'Doe',
      'email': 'sdoe@mail.com'
    },
    {
      'firstName': 'July',
      'lastName': 'Doe',
      'email': 'julydoe@mail.com'
    },
    {
      'firstName': 'Jane',
      'lastName': 'Doe',
      'email': 'janedoe@mail.com'
    }    
  ]
}

var generateHtml = data.results.map(function(item) {
  return '<tr><td>' + item.firstName + '</td></tr>';
})

document.getElementById('example').append(generateHtml);

<table id="example" border="2"></table>

Answer 1

您应该返回实际的元素对象:

let generateElements = data.results.map(function (item) {
    let row = document.createElement("tr");

    row.appendChild(document.createElement("td")).textContent =
        item.firstName;

    return row;
});

然后调用append每个元素作为参数:

document.getElementById("example").tBodies[0].append(...generateElements);

这样做的好处是可以保护您免受XSS等攻击item.firstName.

如果您想支持不支持扩展语法的浏览器,...generateElements最简单的方法是不使用append(polyfilled或不使用):

var target = document.getElementById("example").tBodies[0];

data.results.forEach(function (item) {
    var row = document.createElement("tr");

    row.appendChild(document.createElement("td")).textContent =
        item.firstName;

    target.appendChild(row);
});

let data = {
  'results': [
    {
      'firstName': 'John',
      'lastName': 'Doe',
      'email': 'jdoe@mail.com'
    },
    {
      'firstName': 'Luke',
      'lastName': 'Doe',
      'email': 'loe@mail.com'
    },
    {
      'firstName': 'Sarah',
      'lastName': 'Doe',
      'email': 'sdoe@mail.com'
    },
    {
      'firstName': 'July',
      'lastName': 'Doe',
      'email': 'julydoe@mail.com'
    },
    {
      'firstName': 'Jane',
      'lastName': 'Doe',
      'email': 'janedoe@mail.com'
    }    
  ]
};

let generateElements = data.results.map(function (item) {
  let row = document.createElement("tr");

  row.appendChild(document.createElement("td")).textContent =
    item.firstName;

  return row;
});

document.getElementById('example').tBodies[0].append(...generateElements);

<table id="example" border="2">
    <tbody></tbody>
</table>