使用嵌套的JSON文件创建HTML表格

Question

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

这只是一个示例（仅包含1个人的信息）。对于20个学生的信息也是如此。这是HTML表格的标题。这就是我想要的表格布局。 由于某些错误，我无法在此处提供我尝试过的内容，这是我已尝试的全部内容。

[{
  "student_name": "Shastri Mahesh",
  "date_of_birth": "03-02-2002",
  "parents": [{
    "father_name": "Shidharth Mahesh",
    "mother_name": "Suhana"
  }],
  "blood_group": "AB-",
  "email": "[e-mail]",
  "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);
  });
});

- Shashank Chaudhary

---

第一步是将文件读入JavaScript变量。你能做到吗？另外，你能否更具体地说明你尝试了什么以及问题是什么（即使用简单的英语）？ - Sélim Achour

所有学生的数据格式都和这个一样吗？ - Always Helping

为什么有这么多嵌套数组，当它们只包含一个对象时？这是一种不寻常的结构。 - charlietfl

由于某些错误，我无法在此处提供我尝试的内容。但这就是这个网站的工作方式。您展示您尝试过的代码，其他人帮助改进它。这不是一个免费的代码编写服务。请向我们展示您尝试过的代码。 - charlietfl

是的，格式对所有学生都是相同的。 - Shashank Chaudhary

@ShashankChaudhary，你有尝试过写任何jQuery代码吗？这样我们就可以跟进一下并提供答案了。 - Always Helping

Answer 1

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

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

您需要一个表格heading，就像您在这张图片中所示，但是您在自己的code中根本没有添加任何标题。

最后，您还需要一些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": "[e-mail]",
  "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": "[e-mail]",
  "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>

- Always Helping

Answer 2

尝试使用Datatable，您可以参考这个例子：嵌套对象数据（数组）

- Ali Afine