Creating a html table using nested JSON file

Question

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": "[email protected]",
  "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);
  });
});

First step is reading that file into a javascript variable. Were you able to do that ? Also could you be more specific about what you tried and what was the problem (even in plain english) ? — Sélim Achour
– Sélim Achour, Commented Sep 26, 2020 at 12:10
Is The data for all students is in the same format as this one ? — Always Helping
– Always Helping, Commented Sep 26, 2020 at 12:24
Why so many nested arrays when they only contain one object each? Unusual structure — charlietfl
– charlietfl, Commented Sep 26, 2020 at 12:45
"I couldn't give here what I tried due to some error." But that is how this site works. You show what you tried and others help improve it. It's a not free code writing service. Show us the code you tried — charlietfl
– charlietfl, Commented Sep 26, 2020 at 12:48

Always Helping · Accepted Answer · 2020-09-27 02:30:38Z

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": "[email protected]",
  "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": "[email protected]",
  "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>

Ali Afine · Accepted Answer · 2020-09-26 12:10:09Z

-1

Try using Datatable you can refer to this example :Nested object data (arrays)

answered Sep 26, 2020 at 12:10

Ali Afine

673 bronze badges

Collectives™ on Stack Overflow

Creating a html table using nested JSON file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related