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的返回值undefined附加到第二个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)
    })
  ))

Answer 2

我会把循环放在外面而不是菊花链接在追加函数中，就像你做的那样，它会为循环返回undefined。这应该有效：

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

});

从嵌套数据源

2 个答案: