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（多种填充或不填充）：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用append时，需要传递DOM元素，而不仅仅是字符串。使用.html(generateHtml)或.innerHTML = generateHtml.join('')或创建节点而不是使用append功能。

实施例

＆＃13;

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").innerHTML = generateHtml.join('');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" border=2>

</table>

＆＃13;

Answer 3

不要忘记加入阵列。如果你要返回一个字符串数组，你需要使用innerHTML，否则创建dom对象并手动附加它们。

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').innerHTML = generateHtml.join('');

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

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

3 个答案: