1

My json part:

var Json = {
 "Sample" : {
   "Sample Demo": {
     "1": {"JAN": {"ID": "1","Name": "Jim"}},
     "2": {"FEB": {"ID": "2","Name": "Jack" } }
    }},
 "Idname" : "2",
  "Date" : "01/28/2014",
  "State" : "1"
 }

I want to create table from above json. My table headers will be JAN,FEB and data will be ID and Name.

user3340300
  • 67
  • 1
  • 3
  • 11
  • So are you creating the table at "run time" from an ajax request? Either way, it involves nested `document.createElement('[HTML_ELEMENT]');`s where [HTML_ELEMENT] should be replaced by `
    ` as you traverse the json object.
     – zero298 Mar 03 '14 at 00:09
  • Yes,a part of json to be replaced by
    Here is my jsfiddle but am not getting result http://jsfiddle.net/5n2j7/
     – user3340300 Mar 03 '14 at 00:12
  • 2
    just for your information, [**DataTables**](https://datatables.net/release-datatables/examples/ajax/ajax.html) does this out of the box – balexandre Mar 03 '14 at 00:12
  • @ balexandre I am looking to solve this using Handlebars helpers or custom js/jquery.. – user3340300 Mar 03 '14 at 00:18

2 Answers2

1

Using jQuery:

var content = "<table>";
jQuery.each(Json.Sample["Sample Demo"], function(i, val) {
  jQuery.each(val, function(j, v) { content += "<tr><td>"+v.ID+","+v.Name +"</tr></td>";});
});
content += "</table>"
Omer
  • 684
  • 4
  • 14
  • I updated your jsfiddle with the code above, it now creates the desired HTML table. – Omer Mar 03 '14 at 00:31
  • I need table headers JAN and FEB too from json – user3340300 Mar 03 '14 at 00:47
  • not sure how this fits with the ID/name data. please draw the table you wish to have so I could get the general idea of the headers vs data correspondence. anyway, updated the fiddle with addition of table headers that comes from the json. – Omer Mar 03 '14 at 00:53
  • Here is the table structure http://jsfiddle.net/7X3JH/. Also, am not able to see the updated headers in your fiddle. Kindly review my table structure and provide the fiddle.. – user3340300 Mar 03 '14 at 01:06
  • If you feel this answers your question, please help me by accepting it (click the empty v). And if you have any other questions, don't hesitate to post them here so we could help you out :) you can also click on my avatar for more info – Omer Mar 03 '14 at 01:28
  • Here is the fiddle http://jsfiddle.net/4C7uG/ I updated the json part by adding another key as "4". However, I don't need the key 4 data to be appeared as table..how to implement this..am using handlebars js in the front end.. – user3340300 Mar 03 '14 at 01:34
  • ~Also, instead of id as table data.. am using input tag for that..Check the fiddle here.. http://jsfiddle.net/7X3JH/1/ – user3340300 Mar 03 '14 at 01:38
0

Have a look at this answer.

The author outlines the following solution:

Define a template in your HTML:

<script type="text/template" id="cardTemplate">
<div>
    <a href="{0}">{1}</a>
</div>
</script>

Use string.format to substitute variables:

var cardTemplate = $("#cardTemplate").html();
var template = cardTemplate.format("http://example.com", "Link Title");
$("#container").append(template); 

String.prototype.format = function() {
  var args = arguments;
  return this.replace(/{(\d+)}/g, function(match, number) { 
    return typeof args[number] != 'undefined'
      ? args[number]
      : match
    ;
  });
};
Community
  • 1
  • 1
shenku
  • 11,969
  • 12
  • 64
  • 118