如何使用JSON數據創建html表格？

Question

我所有的，我想使用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。

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

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

 
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

您嘗試這樣

HTML

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

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;