从表中的对象数组返回键对值

Question

是否有更现代的方法来代替$ .each使用嵌套循环？我有代表我在JSON对象中接收到的内容的静态数据，并且试图从该数据构建表，但是我无法找出为什么行不像所包含的静态示例那样排成一行。

var data = [{
    "categoryId": 1,
    "categoryTitle": "Title one"
  },
  {
    "categoryId": 2,
    "categoryTitle": "Title two"
  },
  {
    "categoryId": 3,
    "categoryTitle": "Title three"
  },
  {
    "categoryId": 4,
    "categoryTitle": "Title four"
  },
  {
    "categoryId": 5,
    "categoryTitle": "Title five"
  },
  {
    "categoryId": 6,
    "categoryTitle": "title six"
  }
];


$("#result").append("<table><tr><td>CategoryId</td><td>Value</td></tr>");
$.each(data, function(i, val) {
  $.each(val, function(key, name) {
    $("#result").append("<tr><td>" + key + "</td><td>" + name + "</td></tr>")
  });
});
$("#result").append("</table>");

table {
  border: 1px solid black;
  width: 100%;
  height: 100%;
  background-color: #cecece;
}

table tr:first-of-type {
  background-color: #666666
}

td {
  border: 1px solid grey
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

<h3>Result should look like this below</h3>
<table>
  <tr>
    <td>categoryId</td>
    <td>categoryTitle</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Title one</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Title two</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Title three</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Title four</td>
  </tr>
</table>

Answer 1

你去了：）

您不需要键，因为您要显示的键实际上是一个值。

var data = [{
    "categoryId": 1,
    "categoryTitle": "Title one"
  },
  {
    "categoryId": 2,
    "categoryTitle": "Title two"
  },
  {
    "categoryId": 3,
    "categoryTitle": "Title three"
  },
  {
    "categoryId": 4,
    "categoryTitle": "Title four"
  },
  {
    "categoryId": 5,
    "categoryTitle": "Title five"
  },
  {
    "categoryId": 6,
    "categoryTitle": "title six"
  }
];

var $table = $("<table>");
var $head_row = $("<tr>");
$head_row.append( "<th>CategoryId</th>" );
$head_row.append( "<th>Value</th>" );
$table.append($head_row);

$.each(data, function(i, val) {
  var $row = $('<tr>');
  $.each(val, function(key, name) {
    $row.append( "<td>" + name + "</td>" );
  });
  $table.append($row);
  
});
$("#result").append($table);

table {
  border: 1px solid black;
  width: 100%;
  height: 100%;
  background-color: #cecece;
}

table tr:first-of-type {
  background-color: #666666
}

td {
  border: 1px solid grey
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

Answer 2

与其多次附加到页面上的元素，不如通过先构建html然后一次全部附加html来限制更改DOM的次数。

var data = [
  {
    "categoryId": 1,
    "categoryTitle": "Title one"
  },
  {
    "categoryId": 2,
    "categoryTitle": "Title two"
  },
  {
    "categoryId": 3,
    "categoryTitle": "Title three"
  },
  {
    "categoryId": 4,
    "categoryTitle": "Title four"
  }
];

var result = "<table><tr><td>CategoryId</td><td>Value</td></tr>";

data.forEach(function(category) {
  result += "<tr><td>" + category.categoryId + "</td><td>" + category.categoryTitle + "</td></tr>";
});

result += "</table>";

$("#result").append(result);

table {
  border: 1px solid black;
  width: 100%;
  height: 100%;
  background-color: #cecece;
}

table tr:first-of-type {
  background-color: #666666
}

td {
  border: 1px solid grey
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

<h3>Result should look like this below</h3>
<table>
  <tr>
    <td>categoryId</td>
    <td>categoryTitle</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Title one</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Title two</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Title three</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Title four</td>
  </tr>
</table>

同样重要的是要注意，当您添加到DOM时，您不会添加HTML。

$(selector).append('<table>');
$(selector).append('</table>');

当您执行这两个语句时，每个语句正在DOM中创建一个新的表元素。这是因为添加标记后，标记会立即转换为DOM元素。因此，如果您要创建正确嵌套在其父级中的DOM元素，则必须一次为其提供完整的标记。前提是您要为其添加附加的标记，并且尚未创建DOM片段。

Answer 3

首先通过声明变量并添加到表中，然后再将其附加到dom来构建表是更好的方法。 Felix Kling指出，必须在第二个$ .each之外添加行，以创建我被阻塞的行。

    var data = [{
        "categoryId": 1,
        "categoryTitle": "Title one"
      },
      {
        "categoryId": 2,
        "categoryTitle": "Title two"
      },
      {
        "categoryId": 3,
        "categoryTitle": "Title three"
      },
      {
        "categoryId": 4,
        "categoryTitle": "Title four"
      },
      {
        "categoryId": 5,
        "categoryTitle": "Title five"
      },
      {
        "categoryId": 6,
        "categoryTitle": "title six"
      }
    ];

var tbl = "<table width='100%'>";

tbl += '<tr><th>Category ID</th><th>Category Title</th></tr>';
	$.each(data, function(i, val) {
		tbl += '<tr>'
		$.each(val, function(key, name) {
				tbl += '<td>' + name + '</td>'
		});
	});
	tbl += '</table>'
	
	$("#result").append(tbl);

    table {
      border: 1px solid black;
      width: 100%;
      height: 100%;
      background-color: #cecece;
    }

    table tr:first-of-type {
      background-color: #666666
    }

    td {
      border: 1px solid grey
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div id="result"></div>