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

我正在创建一个动态表行。我的数据源如下所示

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

});

$。每个（数据、函数（键、值）{
var tr=$（“”）；
tr.append（$（''）.append（“”+val.carepath.name+”
”）
.附加(
$（''）。追加(
$。每个（val.tests，函数（k，v）{
var$test_controls=$（“”{
“类”：“控件”
})
$test_controls.append(
$("", {
“类”：“复选框”，
“名字”：v.name，
“文本”：v.name，
“id”：v.id
}).附加(
$("", {
“类型”：“复选框”，
“值”：v.name，
“id”：v.id
})
)
)
})
))
$（“#患者#护理(路径)表格正文”）。追加（tr）；
});

第一个

值很好，但第二个

值没有变化，我做错了什么

第二个

应该包含带有标签的复选框，如下所示

---

问题在于，您将返回值

$追加到第二个td中。每个
未定义的
。使用
$.map
代替
$。每个
：

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

tr.append（$（''）.append（“”+val.carepath.name+”
”）
.附加(
$（''）。追加(
$.map（val.tests，函数（k，v）{//在此处使用map，而不是每个
var$test_controls=。。。；
...
return$test_controls；//不要忘记返回元素（阅读关于map的内容）
})
))
我将把循环放在外部，而不是像您那样在append函数中以菊花链的方式将其链接，它将返回未定义的循环。这应该起作用：

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

    tr.append($('<td>').append("<p>" + val.carepathway.name + "</p>"));
    var second_td = $('<td>'); // Have a variable for the second td so that you can access it later
    $.each(val.tests, function(k, v) { // Process content of your second td
        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

                })
            )
        )
        second_td.append($test_controls);
    });
    tr.append(second_td); // Once done, add it back to tr

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

});

$。每个（数据、函数（键、值）{
var tr=$（“”）；
tr.append（$（''）.append（“”+val.carepath.name+”
”）；
var second_td=$（“”）；//为第二个td设置一个变量，以便以后可以访问它
$.each（val.tests，function（k，v）{//处理第二个td的内容
var$test_controls=$（“”{
“类”：“控件”
})
$test_controls.append(
$("", {
“类”：“复选框”，
“名字”：v.name，
“文本”：v.name，
“id”：v.id
}).附加(
$("", {
“类型”：“复选框”，
“值”：v.name，
“id”：v.id
})
)
)
第二次添加（$test\u controls）；
});
tr.append（second_td）；//完成后，将其添加回tr
$（“#患者#护理(路径)表格正文”）。追加（tr）；
});
给定数据的表应该是什么样子？在帖子上添加了图像