How to create html table using JSON data?

Question

I all, i want make table format using JSON data. I have JSON data like this

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.

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

Please check below html table output based on the out i want to make javascript code. — G Boomanikandan, Mar 03 '17 at 12:12
Please give any idea how to create like that table using json data — G Boomanikandan, Mar 03 '17 at 12:13
Possible duplicate of [Convert json data to a html table](http://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table) — sam, Mar 03 '17 at 12:17
You only showed us the output. Please provide what you tried — Weedoze, Mar 03 '17 at 12:17
@Weedoze Actually G Bookmanikandan didn't write the JS code, but only HTML `` to show to us how it must look like. :) — sam, Mar 03 '17 at 12:18
@sam Then he should try something before. Show us some effort and work — Weedoze, Mar 03 '17 at 12:20
@Weedoze i tried. i am sending sample 4row data only but i have 1lak of array every json array i have 20 variables. thats y i didnt mention original data — G Boomanikandan, Mar 03 '17 at 12:27
@GBoomanikandan Show us what you tried so we can have something to start with. — Weedoze, Mar 03 '17 at 12:36
@Weedoze please check the modified code. based on the example i modified code — G Boomanikandan, Mar 03 '17 at 12:37
@Weedoze ya i added because my json data is coming from webmethod — G Boomanikandan, Mar 03 '17 at 12:40
@GBoomanikandan Please see the linked sent by sam and try something — Weedoze, Mar 03 '17 at 12:46
@Weedoze my scenario is different. sam code they added variable only table header (name,age, hobby). mine not like that mine is different first 2 variable name only table header name and remaining header are dynamic values (English, Maths, Science) its may be change in feature(PHP,ASP.net). — G Boomanikandan, Mar 03 '17 at 12:53

score 2 · Accepted Answer · answered Mar 03 '17 at 13:31

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>

score 1 · Answer 2 · answered Mar 03 '17 at 14:26

You Try like this

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;

How to create html table using JSON data?

2 Answers2