Question

I have a REST api which dumps some json data (user info, etc). Now I need to use that data to:

1. construct html tables,
2. plat graphs using some js graphing lib,
3. Do some calculations over some fields and again display them.

So, essentially I need to do some processing on that data and then display the refined form.

I am new to javascript and trying to understand what is the best practice to construct the html?

I am using jquery to make the ajax call and the success part looks something like this:

success:function(data){
  $('#show_data_here').empty();
  generated_html  = construct_html(data);
  $('#show_data_here').html(generated_html);
}

Now, the construct_html(data) function is getting really ugly since the json I am receiving is huge (800 lines) and I have alot (~10) graphs to display on one page. Is there a better way to approach this problem?

Answer 1

as a start try breaking them down into functions that perform each task.
Then within each task, you may have sub-tasks. break them down again.

success:function(data){
  constructTable(data.tableData);
  grabLib.create(data.graphData);
  updateCalculations(data.tableData);
}

function constructTable(data)
{
  var html = '';
  // foreach
  $('table tbody').empty().html(html);
}

// etc

Idealy you would want to be dealing with objects that could perform the tasks for you, but your first steps would be breaking down the functionality. into smaller chunks.