1

I am trying to create dynamic table using jquery. the problem is the key values are dynamic.

combination_sizetype =  Array ( [0] => 20FR 
            [1] => 20GP 
            [2] => 20HC 
            [3] => 20HD 
            [4] => 20OT 
            [5] => 20RH 
            [6] => 40FR 
            [7] => 40GP 
            [8] => 40HC 
            [9] => 40HD 
            [10] => 40OT 
            [11] => 40RH 
            [12] => 45FR 
            [13] => 45GP 
            [14] => 45HC 
            [15] => 45HD 
            [16] => 45OT 
            [17] => 45RH 
             )

and then i have json like this 

  out_json = [
    {
    "20FR":"0",
    "20GP":"1",
    "20HC":"0",
    "20HD":"0",
    "20OT":"0",
    "20RH":"2",
    "40FR":"0",
    "40GP":"2",
    "40HC":"0",
    "40HD":"0",
    "40OT":"0",
    "40RH":"1",
    "45FR":"0",
    "45GP":"0",
    "45HC":"0",
    "45HD":"0",
    "45OT":"0",
    "45RH":"0",
    "location":"CHENNAI"
    },{"20FR":"0","20GP":"1","20HC":"0","20HD":"0","20OT":"0","20RH":"0","40FR":"0","40GP":"5","40HC":"0","40HD":"0","40OT":"0","40RH":"0","45FR":"0","45GP":"1","45HC":"0","45HD":"0","45OT":"0","45RH":"0","location":"COLOMBO"},{"20FR":"0","20GP":"5","20HC":"0","20HD":"0","20OT":"0","20RH":"0","40FR":"0","40GP":"1","40HC":"0","40HD":"0","40OT":"0","40RH":"0","45FR":"0","45GP":"0","45HC":"0","45HD":"0","45OT":"0","45RH":"0","location":"DELHI"},{"20FR":"0","20GP":"0","20HC":"0","20HD":"0","20OT":"0","20RH":"0","40FR":"0","40GP":"5","40HC":"0","40HD":"0","40OT":"0","40RH":"0","45FR":"0","45GP":"0","45HC":"0","45HD":"0","45OT":"0","45RH":"0","location":"PORT KLANG"},{"20FR":"2","20GP":"0","20HC":"0","20HD":"0","20OT":"0","20RH":"0","40FR":"0","40GP":"2","40HC":"0","40HD":"0","40OT":"0","40RH":"0","45FR":"0","45GP":"0","45HC":"0","45HD":"0","45OT":"0","45RH":"0","location":"ROTTERDAM"}]

now i need to create table like this 

    ---------------------------
   location | 20FR| 20GP|20HC .....ETC..,|  <th>  <-- combination_sizetype array
    ---------------------------
    chennai  |  0  |  1  |  0 .....ETC., .| <tr><td></td>...</tr>    <-- this rows have to assign from json by using combination_sizetype array
     ....,
    ...,
    ... ,,,
    -----------

Please some one help or please give me logic to make this table

Improve this question

3 Answers 3

Reset to default
2

You can do something like this, 

var out_json = [{
  "20FR": "0",
  "20GP": "1",
  "20HC": "0",
  "20HD": "0",
  "20OT": "0",
  "20RH": "2",
  "40FR": "0",
  "40GP": "2",
  "40HC": "0",
  "40HD": "0",
  "40OT": "0",
  "40RH": "1",
  "45FR": "0",
  "45GP": "0",
  "45HC": "0",
  "45HD": "0",
  "45OT": "0",
  "45RH": "0",
  "location": "CHENNAI"
}, {
  "20FR": "0",
  "20GP": "1",
  "20HC": "0",
  "20HD": "0",
  "20OT": "0",
  "20RH": "0",
  "40FR": "0",
  "40GP": "5",
  "40HC": "0",
  "40HD": "0",
  "40OT": "0",
  "40RH": "0",
  "45FR": "0",
  "45GP": "1",
  "45HC": "0",
  "45HD": "0",
  "45OT": "0",
  "45RH": "0",
  "location": "COLOMBO"
}, {
  "20FR": "0",
  "20GP": "5",
  "20HC": "0",
  "20HD": "0",
  "20OT": "0",
  "20RH": "0",
  "40FR": "0",
  "40GP": "1",
  "40HC": "0",
  "40HD": "0",
  "40OT": "0",
  "40RH": "0",
  "45FR": "0",
  "45GP": "0",
  "45HC": "0",
  "45HD": "0",
  "45OT": "0",
  "45RH": "0",
  "location": "DELHI"
}, {
  "20FR": "0",
  "20GP": "0",
  "20HC": "0",
  "20HD": "0",
  "20OT": "0",
  "20RH": "0",
  "40FR": "0",
  "40GP": "5",
  "40HC": "0",
  "40HD": "0",
  "40OT": "0",
  "40RH": "0",
  "45FR": "0",
  "45GP": "0",
  "45HC": "0",
  "45HD": "0",
  "45OT": "0",
  "45RH": "0",
  "location": "PORT KLANG"
}, {
  "20FR": "2",
  "20GP": "0",
  "20HC": "0",
  "20HD": "0",
  "20OT": "0",
  "20RH": "0",
  "40FR": "0",
  "40GP": "2",
  "40HC": "0",
  "40HD": "0",
  "40OT": "0",
  "40RH": "0",
  "45FR": "0",
  "45GP": "0",
  "45HC": "0",
  "45HD": "0",
  "45OT": "0",
  "45RH": "0",
  "location": "ROTTERDAM"
}];


out_json.forEach(function(v, i) {
  console.log(v);
  var row = '<tr>',
    td1 = '',
    td2 = '';
  jQuery.each(v, function(ind, val) {
    if (i == 0)
      td1 += '<th>' + ind + '</th>';
    td2 += '<td>' + val + '</td>';
  });
  if (i == 0)
    row += td1 + '</tr>'
  row += '<tr>' + td2 + '</tr>';
  $('table').append(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table></table>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

To get proper table check this Fiddle or this snippet:

 out_json = [{
   "20FR": "0",
   "20GP": "1",
   "20HC": "0",
   "20HD": "0",
   "20OT": "0",
   "20RH": "2",
   "40FR": "0",
   "40GP": "2",
   "40HC": "0",
   "40HD": "0",
   "40OT": "0",
   "40RH": "1",
   "45FR": "0",
   "45GP": "0",
   "45HC": "0",
   "45HD": "0",
   "45OT": "0",
   "45RH": "0",
   "location": "CHENNAI"
 }, {
   "20FR": "0",
   "20GP": "1",
   "20HC": "0",
   "20HD": "0",
   "20OT": "0",
   "20RH": "0",
   "40FR": "0",
   "40GP": "5",
   "40HC": "0",
   "40HD": "0",
   "40OT": "0",
   "40RH": "0",
   "45FR": "0",
   "45GP": "1",
   "45HC": "0",
   "45HD": "0",
   "45OT": "0",
   "45RH": "0",
   "location": "COLOMBO"
 }, {
   "20FR": "0",
   "20GP": "5",
   "20HC": "0",
   "20HD": "0",
   "20OT": "0",
   "20RH": "0",
   "40FR": "0",
   "40GP": "1",
   "40HC": "0",
   "40HD": "0",
   "40OT": "0",
   "40RH": "0",
   "45FR": "0",
   "45GP": "0",
   "45HC": "0",
   "45HD": "0",
   "45OT": "0",
   "45RH": "0",
   "location": "DELHI"
 }, {
   "20FR": "0",
   "20GP": "0",
   "20HC": "0",
   "20HD": "0",
   "20OT": "0",
   "20RH": "0",
   "40FR": "0",
   "40GP": "5",
   "40HC": "0",
   "40HD": "0",
   "40OT": "0",
   "40RH": "0",
   "45FR": "0",
   "45GP": "0",
   "45HC": "0",
   "45HD": "0",
   "45OT": "0",
   "45RH": "0",
   "location": "PORT KLANG"
 }, {
   "20FR": "2",
   "20GP": "0",
   "20HC": "0",
   "20HD": "0",
   "20OT": "0",
   "20RH": "0",
   "40FR": "0",
   "40GP": "2",
   "40HC": "0",
   "40HD": "0",
   "40OT": "0",
   "40RH": "0",
   "45FR": "0",
   "45GP": "0",
   "45HC": "0",
   "45HD": "0",
   "45OT": "0",
   "45RH": "0",
   "location": "ROTTERDAM"
 }]
 var v = $("#data").detach()   // detach the element as dom is slow
 var str = ""
 str = "<tr>"
 $.each(out_json[0], function(key, valu) {

   str = str + "<th>" + key + "</th>"
 })
 str = str + "</tr>"
 $.each(out_json, function(index, value) {
   str = str + "<tr>"
   $.each(value, function(key, valu) {
     str = str + "<td>" + valu + "</td>"
   })

   str = str + "</tr>"
 })
 v.html(str)
 $("body").append(v)   // append element to the parent, in case example body
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="data"></table>

Improve this answer

Comments

1

HTML :

<table id="ooo" class="table table-bordered">
        </table>

Jquery :

<script type="text/javascript">


  out_json = [
        {
            "20FR": "0",
            "20GP": "1",
            "20HC": "0",
            "20HD": "0",
            "20OT": "0",
            "20RH": "2",
            "40FR": "0",
            "40GP": "2",
            "40HC": "0",
            "40HD": "0",
            "40OT": "0",
            "40RH": "1",
            "45FR": "0",
            "45GP": "0",
            "45HC": "0",
            "45HD": "0",
            "45OT": "0",
            "45RH": "0",
            "location": "CHENNAI"
        }, {"20FR": "0", "20GP": "1", "20HC": "0", "20HD": "0", "20OT": "0", "20RH": "0", "40FR": "0", "40GP": "5", "40HC": "0", "40HD": "0", "40OT": "0", "40RH": "0", "45FR": "0", "45GP": "1", "45HC": "0", "45HD": "0", "45OT": "0", "45RH": "0", "location": "COLOMBO"}, {"20FR": "0", "20GP": "5", "20HC": "0", "20HD": "0", "20OT": "0", "20RH": "0", "40FR": "0", "40GP": "1", "40HC": "0", "40HD": "0", "40OT": "0", "40RH": "0", "45FR": "0", "45GP": "0", "45HC": "0", "45HD": "0", "45OT": "0", "45RH": "0", "location": "DELHI"}, {"20FR": "0", "20GP": "0", "20HC": "0", "20HD": "0", "20OT": "0", "20RH": "0", "40FR": "0", "40GP": "5", "40HC": "0", "40HD": "0", "40OT": "0", "40RH": "0", "45FR": "0", "45GP": "0", "45HC": "0", "45HD": "0", "45OT": "0", "45RH": "0", "location": "PORT KLANG"}, {"20FR": "2", "20GP": "0", "20HC": "0", "20HD": "0", "20OT": "0", "20RH": "0", "40FR": "0", "40GP": "2", "40HC": "0", "40HD": "0", "40OT": "0", "40RH": "0", "45FR": "0", "45GP": "0", "45HC": "0", "45HD": "0", "45OT": "0", "45RH": "0", "location": "ROTTERDAM"}];


     $.each(out_json, function (m, n) {
      var xx, yy = "";
      var row = '<tr>';
        $.each(n, function (a, b) {
          xx += "<td>" + a + "</td>";
          yy += "<td>" + b + "</td>";
       });
      row += xx + '</tr><tr>' + yy + '</tr>';
      $('#ooo').append(row)
   });



$('#ooo tr td:nth-last-child(1)').each(function () {
        var thisv = $(this);
        $(this).closest('tr').prepend(thisv)
        console.log($(this).closest('tr').find('td:nth-child(1)'))
    });
    </script>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.