Export json data into html table following format

Question

I need to export json data into html table in customize format.

 var data =[ { "ID":1, "Sl.No.":1, "325":25, "430":30, "2011":15, "1915":80 }, { "ID":1, "Sl.No.":2, "325":40, "430":30, "2011":20, "1915":100 }, { "ID":1, "Sl.No.":3, "325":40, "430":25, "2011":20, "1915":100 }, { "ID":1, "Sl.No.":4, "325":4, "430":2, "2011":1, "1915":20 }];

required output following format

ID Sl.No. 1 1 0325 25 1 1 0430 30 1 1 2011 15 1 1 1915 80 1 2 0325 40 1 2 0430 30 1 2 2011 20 1 2 1915 100 1 3 0325 40 1 3 0430 25 1 3 2011 20 1 3 1915 100 1 4 0325 4 1 4 0430 2 1 4 2011 1 1 4 1915 20

@taylorc93 I am new to json. i cant able to create logic for this code . — Karthik Arthik, Aug 15 '15 at 17:35
@Arthik have a go using a _native JavaScript Object_ first and see if you can get that working. — Paul S., Aug 15 '15 at 17:37

score 2 · Answer 1 · edited May 23 '17 at 12:00

2

Try parsing the json string to javascript object array (Ref: deserialize from json to javascript object)
Use for loop to iterate through each array value and create a table html as you require
Append the html into your html doc using jQuery append (Ref: http://api.jquery.com/append/)

edited May 23 '17 at 12:00

Community

1
1

answered Aug 15 '15 at 17:40

Khadim Ali

2,548
3
33
61

score 1 · Accepted Answer · answered Aug 15 '15 at 17:51

var data =[ { "ID":1, "Sl.No.":1, "325":25, "430":30, "2011":15, "1915":80 }, { "ID":1, "Sl.No.":2, "325":40, "430":30, "2011":20, "1915":100 }, { "ID":1, "Sl.No.":3, "325":40, "430":25, "2011":20, "1915":100 }, { "ID":1, "Sl.No.":4, "325":4, "430":2, "2011":1, "1915":20 }];
$a = $('#values')
$.each(data, function(index, value) {
  $thisRow = $('<tr/>')
    .append($('<td>' + value['ID'] + '</td>'))
    .append($('<td>' + value['Sl.No.'] + '</td>'))
    .append($('<td>' + '0325' + '</td>'))
    .append($('<td>' + value['325'] + '</td>'))
  for (var i = 0; i < 3; i++) {
    if (i == 0)
      key = '430';
    if (i == 1)
      key = '2011';
    if (i == 2)
      key = '1915';
    $thisRow = $('<tr/>')
      .append($('<td>' + value['ID'] + '</td>'))
      .append($('<td>' + value['Sl.No.'] + '</td>'))
      .append($('<td>' + key + '</td>'))
      .append($('<td>' + value[key] + '</td>'));
    $a.append($thisRow);
  }


})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="values"></table>

score 0 · Answer 3 · answered Aug 15 '15 at 18:05

use below code

var data ='[{ "ID":1, "Sl.No.":1, "325":25, "430":30, "2011":15, "1915":80 }, { "ID":1, "Sl.No.":2, "325":40, "430":30, "2011":20, "1915":100 }, { "ID":1, "Sl.No.":3, "325":40, "430":25, "2011":20, "1915":100 }, { "ID":1, "Sl.No.":4, "325":4, "430":2, "2011":1, "1915":20 }]';

var str = JSON.parse(data);
var temp= '';

$.each(str,function(index, value){

  var id = value.ID;
  var slNo = value['Sl.No.'];
  
   $.each(value, function(ind, val){
   
       if(ind !='ID' && ind != 'Sl.No.' )
                  temp+='<tr><td>'+id+'</td><td>'+slNo+'</td><td>'+ind+
                    '</td><td>'+val+'</td></tr>';             
   });
});

$('#myTable tbody').append(temp);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="myTable" border="1">
  <thead>
      <th>Head 1</th>
    <th>Head 2</th><th>Head 3</th><th>Head 4</th>
    </thead>
  <tbody></tbody>
  </table>

Export json data into html table following format

3 Answers3