Json to html table using JavaScript

Question

Am new to JavaScript. I need to parse the below JSON into a html using JavaScript, such a way that The Table 1 should be visible at first and if I click on the class 12A, then it should show Table 2 in the same place where we display Table 1 with 12A details. From Table 2 , if I click on staff name, then it should display Table 3 in the same place where we display Table 3. Can someone guide me with the logic

Table 1

Table 2

Table 3

{
  "school" : [{
    "class" : "12A",
    "total" : "75",
    "staff" : [{
        "staffName" : "Stella", 
        "age" : "31",
        "staffDetails" : [{
          "totalClassTaken" : "3",
          "degree" : "Masters"
        }]
    }]
  },
  {
    "Class" : "12B",
    "total" : "75",
    "staff" : [{
      "staffName" : "Morris", 
      "total" : "20",
      "staffDetails" : [{
        "totalClassTaken" : "3",
        "degree" : "Masters"
      }]   
  }]
  }]
}

Sandip Bailkar · Accepted Answer · 2018-12-06 08:58:27Z

var schoolInfo={
 	 "school" : [{
    "class" : "12A",
    "total" : "75",
    "staff" : [{
        "staffName" : "Stella", 
        "age" : "31",
        "staffDetails" : [{
          "totalClassTaken" : "3",
          "degree" : "Masters"
        }]
    }]
  },
  {
    "class" : "12B",
    "total" : "20",
    "staff" : [{
      "staffName" : "Morris", 
      "total" : "20",
      "staffDetails" : [{
        "totalClassTaken" : "3",
        "degree" : "Masters"
      }]   
  }]
  }]
}

// create table;
   
   var table = document.createElement('table');
   table.setAttribute("class", "border_class");
   var tr = table.insertRow(-1);
   
   
//Create Header row
var headerRow =[];

for(var key in schoolInfo.school){
//console.log(schoolInfo.school[key]);
	if(schoolInfo.school[key].hasOwnProperty('class') && schoolInfo.school[key].hasOwnProperty('total') ){
  headerRow.push('class');
  headerRow.push('total');
  break;
  }
	
}
//Append Header row to to tr tage
for(var i=0;i<headerRow.length;i++){
	var th = document.createElement('th');
	th.innerHTML=headerRow[i];
  tr.appendChild(th);
  
}

// Now Add header tr and  json data  to table


for(var key in schoolInfo.school){
      var tableCell = tr.insertCell(-1);
      tr.style='  border: 1px solid #dddddd;text-align:left;padding: 15px;'
  		 tr = table.insertRow(-1);
      for(var j=0;j<headerRow.length;j++){
    	var tableCell = tr.insertCell(-1);
      //tableCell.style=' border: solid 1px black;align:left'
      tableCell.style='  border: 1px solid #dddddd;text-align:left;padding: 15px;'
      tableCell.innerHTML = schoolInfo.school[key][headerRow[j]];
    }
}

var show =document.getElementById('show');

show.innerHTML="";
show.appendChild(table);

.border_class  {
border-collapse: collapse;

}

<div id='show'>

</div>

Code for JSON to HTML ....

+1. @Sandip. Thanks for the answer. It really worked well for one row, but can you help me guiding how could I proceed clicking class 12A should return table 2. Suggestions are much appreciated !!

Collectives™ on Stack Overflow

Json to html table using JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related