Create table cell from nested data source

Question

I'm creating a dynamic table row. my data source looks like this

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

This is how I'm creating my table.

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

});

First <td> value coming fine but nothing is coming for the second <td> What I'm doing wrong here?

Second <td> should contain the checkbox with the label, Like this

JSFIDDLE

How should the table of the given data look like?

ibrahim mahrir
– ibrahim mahrir

2018-06-08 19:15:02 +00:00
Commented Jun 8, 2018 at 19:15 — ibrahim mahrir
– ibrahim mahrir, Commented Jun 8, 2018 at 19:15
Added image on the post

Raihan
– Raihan

2018-06-08 19:23:49 +00:00
Commented Jun 8, 2018 at 19:23 — Raihan
– Raihan, Commented Jun 8, 2018 at 19:23

ibrahim mahrir · Accepted Answer · 2018-06-08 22:58:22Z

1

The problem is that you're appending the return value of $.each which is undefined to the second td. Use $.map instead of $.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)
    })
  ))

edited Jun 8, 2018 at 22:58

answered Jun 8, 2018 at 19:32

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Long M K Nguyễn · Accepted Answer · 2018-06-08 20:41:06Z

I would put the loop outside instead of daisy-chaining it inside the append function like how you did, it would return undefined for the loop. This should work:

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

});

Collectives™ on Stack Overflow

Create table cell from nested data source

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related