jquery - 使用嵌套的 JSON 文件创建 html 表

Question

我有一个名为 info.json 的 JSON 文件，其中包含 20 名学生的个人信息，我想将其转换为 HTML 表格。

这只是一个示例(只有 1 个信息)。这适用于 20 个学生。 This is HTML table headings only .这就是我想要的表格布局方式。 由于某些错误，我无法在这里给出我尝试过的内容。这是我尝试过的。

[{
  "student_name": "Shastri Mahesh",
  "date_of_birth": "03-02-2002",
  "parents": [{
    "father_name": "Shidharth Mahesh",
    "mother_name": "Suhana"
  }],
  "blood_group": "AB-",
  "email": "shastri.mahesh@outlook.com",
  "phone": [{
    "landline": 9812343541,
    "mobile": 908252123
  }],
  "address": [{
    "door_no": "3A",
    "street_name": "Shastri nagar",
    "place_name": "Delhi",
    "pin_code": 142342,
    "country": "India"
  }],
  "degree": [{
    "ug": true,
    "pg": true,
    "others": "PhD(English Hons.)"
  }]
}]

$(document).ready(function() {

  // FETCHING DATA FROM JSON FILE 
  $.getJSON("info.json", function(data) {
    var student = '';

    // ITERATING THROUGH OBJECTS 
    $.each(data, function(key, value) {

      //CONSTRUCTION OF ROWS HAVING 
      // DATA FROM JSON OBJECT 
      student += '<tr>';
      student += '<td>' + value.student_name + '</td>';

      student += '<td>' + value.date_of_birth + '</td>';

      student += '<td>' + value.parents.father_name + '</td>';

      student += '<td>' + value.parents.mother_name + '</td>';

      student += '<td>' + value.blood_group + '</td>';

      student += '<td>' + value.email + ',' + '<br>' + value.phone.landline + ',' + value.phone.mobile + '</td>';

      student += '<td>' + value.address.door_no + ',' + value.address.street_name + ',' + value.address.place_name + ', <br>' + value.address.country + '-' + value.address.pin_code + '</td>';

      student += '<td>' + value.degree.ug + '</td>';

      student += '<td>' + value.degree.pg + '</td>';

      student += '<td>' + value.degree.others + '</td>';

      student += '</tr>';
    });

    //INSERTING ROWS INTO TABLE  
    $('#table').append(student);
  });
});

Answer 1

您当前代码的问题在于您根本没有在 $.each 函数中使用嵌套数组数据。您有嵌套数组，如 degree 和 parent's name

因此，您也需要遍历它们或直接访问 data，因为数据 structure 始终相同。此外，您需要使用 .html 简化数组的 results 并为您创建的每个 row 创建 td's有。

您需要一个表格heading 以及您在this picture 中显示 的表格但您根本没有在您自己的代码中附加任何标题。

最后，您还需要一些 CSS 来确保表格看起来漂亮且有序 - 我已经修复了您所有的 code 和更多虚拟数据以显示它的全部现在工作。运行下面的代码段。

完成工作演示:

var data = [{
  "student_name": "Always Helping",
  "date_of_birth": "03-02-2002",
  "parents": [{
    "father_name": "Foo",
    "mother_name": "Bar"
  }],
  "blood_group": "Always B +",
  "email": "foo@google.com.au",
  "phone": [{
    "landline": 9812343541,
    "mobile": 908252123
  }],
  "address": [{
    "door_no": "3A",
    "street_name": "Shastri nagar",
    "place_name": "Melbourne",
    "pin_code": 85000,
    "country": "Australia"
  }],
  "degree": [{
    "ug": true,
    "pg": true,
    "others": "PhD(IT Hons.)"
  }]
}, {
  "student_name": "Shastri Mahesh",
  "date_of_birth": "03-02-2002",
  "parents": [{
    "father_name": "Shidharth Mahesh",
    "mother_name": "Suhana"
  }],
  "blood_group": "AB-",
  "email": "shastri.mahesh@outlook.com",
  "phone": [{
    "landline": 9812343541,
    "mobile": 908252123
  }],
  "address": [{
    "door_no": "3A",
    "street_name": "Shastri nagar",
    "place_name": "Delhi",
    "pin_code": 142342,
    "country": "India"
  }],
  "degree": [{
    "ug": true,
    "pg": true,
    "others": "PhD(English Hons.)"
  }]
}]

let table = $('#table') //table variable

//Create table heading
table.append("<thead><td>Name</td><td>DOB</td><td>Father's Name</td><td>Mother's Name</td><td>Blood Group</td><td>Contact</td><td>Address</td><td>UG</td><td>PG</td><td>Others</thead></th>");

//Loop through the data
$.each(data, function(index, x) {
  let row = $('<tr>');
  row.append($('<td>').html(x.student_name));
  row.append($('<td>').html(x.date_of_birth));
  //Mother / father
  row.append($('<td>').html(x.parents[0].father_name));
  row.append($('<td>').html(x.parents[0].mother_name));
  row.append($('<td>').html(x.blood_group));
  //get landline [0] or mobile [1]
  row.append($('<td>').html(x.phone[0].landline));
  //Address
  $.each(x.address, function(index, o) {
    row.append($('<td>').html(o.door_no + ', ' + o.street_name +
      ', ' + o.place_name + ', ' + o.pin_code));
  })
  //Degree
  row.append($('<td>').html(x.degree[0].ug));
  row.append($('<td>').html(x.degree[0].pg));
  row.append($('<td>').html(x.degree[0].others));
  table.append(row) //append all data
})

th,
td {
  border-collapse: collapse;
  padding: 0.5em;
}

thead {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="table"></table>