在不同的列中显示JSON数据

I have below query regarding populating the data in different columns corresponding to their label. If you observe the below plunker, I am able to display the data from JSON file, what I need to do is to move the second iteration to FEMALE column. Thanks for any help.

我在下面有关于在与其标签对应的不同列中填充数据的查询。如果你观察下面的plunker,我能够显示JSON文件中的数据,我需要做的是将第二次迭代移动到FEMALE列。谢谢你的帮助。

Plunker URL

jQuery Code

var request = $.ajax({
  url: "data.json",
  method: "GET",
});
request.done(function(data) {
  var len = data.length;
  for (var i = 0; i < len; i++) {

    var name = data[i].Name,
      id = data[i].ID,
    profession = data[i].Profession;

    $(".container table tbody").append("<tr><td>Name</td><td>" + name + "    </td></tr><tr><td>ID</td><td>" + id + "</td></tr><tr><td>Profession</td><td>" + profession + "</td></tr>");
  }
});

request.fail(function(jqXHR, textStatus) {
  alert("Request failed: " + textStatus);
});

Expected Result

<table width="100%" cellspacing="0" cellpadding="0">
<thead>
  <tr>
    <th></th>
    <th>Male</th>
    <th>Female</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Name</td>
    <td>Nitesh</td>
    <td>Shilpa</td>
  </tr>
  <tr>
    <td>ID</td>
    <td>123</td>
    <td>456</td>
  </tr>
  <tr>
    <td>Profession</td>
    <td>Manager</td>
    <td>Developer</td>
  </tr>
</tbody>

1 个解决方案

#1

Here is a simple solution.. insert it after you get your data variables.

这是一个简单的解决方案..在获取数据变量后插入它。

var name = data[i].Name,
id = data[i].ID,
profession = data[i].Profession,
gender = data[i].Gender;

if (gender == "Male"){
    $(".container table tbody").append("<tr><td>Name</td><td>" + name + "</td></tr><tr><td>ID</td><td>" + id + "</td></tr><tr><td>Profession</td><td>" + profession + "</td></tr>"); 
} else {
    $(".container table tbody").append("<tr><td>Name</td><td></td><td>" + name + "</td></tr><tr><td>ID</td><td></td><td>" + id + "</td></tr><tr><td>Profession</td><td></td><td>" + profession + "</td></tr>"); 
}