我有一个名为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": "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);
});
});