Creating a html table using nested JSON file

user_14104402 0
Viewed 1061

I have a JSON file named info.json which have personal info of 20 students, and I want to convert it to a HTML table.

This is just an example(info of just 1).This goes for 20 students.This is HTML table headings only.This is how I want my table 's layout. I couldn 't give here what I tried due to some error. This is upto what I have tried.

[{
  "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);
  });
});

jquery json
2 Answers

The problem with your current code is that you are not using nested array data at all in your $.each function. You have nested array like degree and parent's name

So you need either loop through them as well or simply access the data directly since the data structure is always same. In addition, you need simplify the results of your array by using .html and create td's for each row you have.

You need a table heading well which you have shown in this picture but you are not appending any heading in your own code at all.

Lastly, you also need some CSS to make sure the table looks nice and in order - I have fixed up all your code and more dummy data to show its all working now. Run snippet below.

Complete Working Demo:

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>

user_136690480
user_134245330
Related