如何使用JSON数据创建html表？

我想，我想使用JSON数据制作表格格式。 我有这样的JSON数据

var jsondata = [ { id: 1, name: 'Mani', subject: English, Score: 88 }, { id: 1, name: 'Mani', subject: Maths, Score: 65 }, { id: 2, name: 'Ram', subject: English, Score: 75 }, { id: 3, name: 'Kumar', subject: English, Score: 15 }, { id: 3, name: 'Kumar', subject: science, Score: 88 }]; 

在这个数据中我想改变这种格式。 我无法附加截图图片，所以请检查以下输出代码。 像输出一样我只需要使用javascript 。

 
 
 
 ID 
 
 Name 
 
 English 
 
 Maths 
 
 science 
 
 
 
 1 
 
 Mani 
 
 88 
 
 65 
 
 - 
 
 
 
 2 
 
 Ram 
 
 75 
 
 - 
 
 - 
 
 
 
 3 
 
 Kumar 
 
 18 
 
 - 
 
 88 
 
  

 var jsondata = [ { id: 1, name: 'Mani', subject: 'English', Score: 88 }, { id: 1, name: 'Mani', subject: 'Maths', Score: 65 }, { id: 2, name: 'Ram', subject: 'English', Score: 75 }, { id: 3, name: 'Kumar', subject: 'English', Score: 15 }, { id: 3, name: 'Kumar', subject: 'science', Score: 88 } ] var obj = jsondata; var category = []; var callid = []; //alert("hai"); for (var i = 0; i < Object.keys(obj).length; i++) { callid.push(obj[i]['subject']); category.push(obj[i]['subject']); } var uniquecategory = uniquerResult(category); var uniquecallid = uniquerResult(callid); console.log(uniquecallid); function uniquerResult(obj) { var unique = []; $.each(obj, function (i,ei) { if ($.inArray(ei, unique) === -1) unique.push(ei); }) return unique; } 

Answer 1

 var jsondata=[{id:1,name:"Mani",subject:"English",Score:88},{id:1,name:"Mani",subject:"Maths",Score:65},{id:2,name:"Ram",subject:"English",Score:75},{id:3,name:"Kumar",subject:"English",Score:15},{id:3,name:"Kumar",subject:"Science",Score:88}]; var headers = ["Id", "Name", ...jsondata.map(d => d.subject).filter((item,pos,self) => self.indexOf(item) == pos)]; var data = Object.values(jsondata.reduce(function(map, item){ map[item.id] = map[item.id] || {}; map[item.id].id = item.id; map[item.id].name = item.name; map[item.id][item.subject] = item.Score; return map; }, {})); function buildHtmlTable(selector) { var columns = addAllColumnHeaders(headers, selector); for (var i = 0; i < data.length; i++) { var d = data[i]; var row$ = $(''); row$.append($('').html(d.id)); row$.append($('').html(d.name)); row$.append($('').html(d.English || "")); row$.append($('').html(d.Maths || "")); row$.append($('').html(d.Science || "")); $(selector).append(row$); } } function addAllColumnHeaders(myList, selector) { var headerTr$ = $(''); for (var i = 0; i < myList.length; i++) { var header = myList[i]; headerTr$.append($('').html(header)); } $(selector).append(headerTr$); } 

Answer 2

你试试这样

HTML

JAVASCRIPT

 var jsondata = [ { id: 1, name: 'Mani', subject: 'English', Score: 88 }, { id: 1, name: 'Mani', subject: 'Maths', Score: 65 }, { id: 2, name: 'Ram', subject: 'English', Score: 75 }, { id: 3, name: 'Kumar', subject: 'English', Score: 15 }, { id: 3, name: 'Kumar', subject: 'science', Score: 88 } ] var obj = jsondata; var result = {}; var fields = ['id','name']; for(var x=0 ;x a.indexOf(v) === i); var html = ''; html +=''; for(var c=0;c'; } html +='' for(var index in result) { html +=''; var attr = result[index]; // console.log(attr); for(var x = 0; x< fields.length; x++){ html +=''; } html +=''; } html +='
'; if(attr[fields[x]] == undefined){ html += '---'; }else{ html += attr[fields[x]]; } html +='
'; document.getElementById('result').innerHTML = html;