javascript - 从嵌套数据源创建表格单元格

Question

我正在创建一个动态表格行。我的数据源看起来像这样

 data = [
  {
    "id": 11,
    "tests": [{
        "id": 2,
        "name": "Glucose Level"
      },
      {
        "id": 4,
        "name": "Blood Oxygen"
      }
    ],
    "carepathway": {
      "id": 16,
      "name": "General Check-Up",
      "slug": "general_check_up",
      "dynamic_field": null
    }
  }
]

这就是我创建表格的方式。

$.each(data, function(key, val) {
  var tr = $("<tr />");


  tr.append($('<td>').append("<p>" + val.carepathway.name + "</p>"))
    .append(
      $('<td>').append(

        $.each(val.tests, function(k, v) {
          var $test_controls = $("<div/>", {
            "class": "controls"
          })
          $test_controls.append(
            $("<label>", {
              "class": "checkbox",
              "name": v.name,
              "text": v.name,
              'id': v.id
            }).append(
              $("<input>", {
                "type": "checkbox",
                "value": v.name,
                'id': v.id

              })
            )
          )
        })
      ))

  $("#patient_care_pathway_table tbody").append(tr);

});

第一个<td>值很好，但第二个没有任何结果 <td>我在这里做错了什么？

第二 <td>应该包含带有标签的复选框，像这样

JSFIDDLE

Answer 1

问题是您将 $.each 的返回值(未定义)附加到第二个 td。使用 $.map 而不是 $.each:

tr.append($('<td>').append("<p>" + val.carepathway.name + "</p>"))
.append(
  $('<td>').append(
    $.map(val.tests, function(k, v) {              // use map here instead of each
      var $test_controls = ...;
      ...
      return $test_controls;                       // don't forget to return the element (read about map)
    })
  ))