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
– G Boomanikandan, Commented Mar 3, 2017 at 12:12
Please give any idea how to create like that table using json data — G Boomanikandan
– G Boomanikandan, Commented Mar 3, 2017 at 12:13
You only showed us the output. Please provide what you tried — Weedoze
– Weedoze, Commented Mar 3, 2017 at 12:17

Weedoze · Accepted Answer · 2017-03-03 13:31:04Z

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>

Tonmoy Nandy · Accepted Answer · 2017-03-03 14:26:09Z

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;

Collectives™ on Stack Overflow

How to create html table using JSON data?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related