How to improve this javascript code loading JSON files to be more dynamic

Question

I'm building a web page with a collection of html tables. The data for each table is stored JSON files and I wrote a JQuery method to load the data and render it into HTML. Currently, this looks like

HTML
<!-- Load sample_triangles.json into the following table -->
<table class="table json-triangle" data-filename="data/sample_triangles.json"></table>

<!-- Load sample_triangles2.json into the following table -->
<table class="table json-triangle" data-filename="data/sample_triangles2.json"></table>


JQuery
function renderTriangle(tri){
    //Renders a single triangle object to HTML (assumed to be wrapped inside <table> </table>)
    ...
    return str_tbl;
};

$.getJSON('data/sample_triangles.json', function(data){
  $('table[data-filename="data/sample_triangles.json"]').html(renderTriangle(data['ActiveCustomers']));
});

$.getJSON('data/sample_triangles2.json', function(data){
  $('table[data-filename="data/sample_triangles2.json"]').html(renderTriangle(data['ActiveCustomers']));
});

How can I generalize this code better so that simply creating a <table> element with a data-filename attribute will trigger JQuery to search for a json file with the given filename and attempt to render it in the table?

If purpose of this question is just to seek improvements in your working code, codereview.stackexchange.com is the right place for it. — Rajesh Dixit
– Rajesh Dixit, Commented Jan 30, 2016 at 6:14

dvenkatsagar · Accepted Answer · 2016-01-30 06:10:41Z

2

I think it would go something like this:

$("table").each(function(){
  var filename = $(this).data("filename");
  var this1 = $(this);
  $.getJSON(filename,function(data){
    this1.html(renderTriangle(data['ActiveCustomers']));
  });
});

edited Jan 30, 2016 at 6:10

answered Jan 30, 2016 at 5:39

dvenkatsagar

9367 silver badges22 bronze badges

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

3 Comments

Ben Over a year ago

Hmm, this doesn't seem to work. filename is undefined (but I'm certain it's set in the HTML). If I change every $(t) to $(this), filename gets set correctly but then I get the error Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

dvenkatsagar Over a year ago

where did you define the document.createDocumentFragment??

Ben Over a year ago

Bingo. Thanks for the help.

Collectives™ on Stack Overflow

How to improve this javascript code loading JSON files to be more dynamic

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related