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

Question

I all, i want make table format using JSON data. 我想，我想使用JSON数据制作表格格式。 I have JSON data like this 我有这样的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
    }];

In this data i would like to change like this format. 在这个数据中，我想改变这种格式。 I am not able to attached screenshot images so please check this below output code. 我无法附加截图图片，因此请在下面输出代码进行检查。 same like output only i require using javascript . 像输出一样我只需要使用javascript 。

 <table border='1'> <tr> <th> ID </th> <th> Name </th> <th> English </th> <th> Maths </th> <th> science </th> </tr> <tr> <td> 1 </td> <td> Mani </td> <td> 88 </td> <td> 65 </td> <td> - </td> </tr> <tr> <td> 2 </td> <td> Ram </td> <td> 75 </td> <td> - </td> <td> - </td> </tr> <tr> <td> 3 </td> <td> Kumar </td> <td> 18 </td> <td> - </td> <td> 88 </td> </tr> </table>

 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; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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$ = $('<tr/>'); row$.append($('<td/>').html(d.id)); row$.append($('<td/>').html(d.name)); row$.append($('<td/>').html(d.English || "")); row$.append($('<td/>').html(d.Maths || "")); row$.append($('<td/>').html(d.Science || "")); $(selector).append(row$); } } function addAllColumnHeaders(myList, selector) { var headerTr$ = $('<tr/>'); for (var i = 0; i < myList.length; i++) { var header = myList[i]; headerTr$.append($('<th/>').html(header)); } $(selector).append(headerTr$); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body onLoad="buildHtmlTable('#dataTable')"> <table id="dataTable" border="1"> </table> </body>

Answer 2

You Try like this 你试试这样

HTML HTML

<div id="result"></div>

JAVASCRIPT 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<obj.length ; x++){
      var e = obj[x];
      if(result[e.id]==undefined){
        result[e.id]={
          id : e.id,
          name : e.name,
         // e.subject : e.score
        };
      }
      fields.push(e.subject);
      result[e.id][e.subject] = e.Score;
    }

fields = fields.filter((v, i, a) => a.indexOf(v) === i); 
var html = '<table>';
html +='<tr>';
for(var c=0;c<fields.length ; c++){
  html +='<th>'+fields[c]+'</th>';
}
html +='</tr>'
for(var index in result) { 
    html +='<tr>';
    var attr = result[index]; 
   // console.log(attr);
    for(var x = 0; x< fields.length; x++){
    html +='<td>';
    if(attr[fields[x]] == undefined){
      html += '---';
    }else{
      html += attr[fields[x]];
    }
      html +='</td>';
    }
    html +='</tr>';
}


html +='</table>';

document.getElementById('result').innerHTML = html;

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-03-03 13:31:04

解决方案2
1 2017-03-03 14:26:09

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-03-03 13:31:04

解决方案2 1 2017-03-03 14:26:09

解决方案1
2 已采纳 2017-03-03 13:31:04

解决方案2
1 2017-03-03 14:26:09