# Creating chart from data fetched from backend

I have a javascript function written which I think is horrible for multiple reasons (which I have tried to mention in the comments in code below). I want to give it a rewrite following some best practises in general.

I am trying to solve following two problems.

1. Do I need to include multiple try-catch statements in this code & break it into multiple smaller functions?

2. If there is an exception or error thrown I can't show the exact error to the user as the error might be from the backend (consider wrong data format passed) so, I will just show "some error occurred alert" but while debugging I need to catch these errors and do not want to manually insert in every exception block. so how do I do this?

I considered this solution: disable console.log in production code but againg my code will be filled wth console.log statements everywhere which I dont thiink is good idea.

I think this is a common problem and how is it usually handled?

The idea of this function is to fetch data from backend API & create charts and a table to display data. I have commented where execptions might occur. But do I have to handle them individually or is there a better way to rewrite this function? Maybe breaking this down in to multiple individual functions?

  function getData() {

var url = "/some-url/";

$.getJSON(url, function(data) { //assign data key inside data to a local variable . what if data doesnt have data key?? var bulkData = data.data; //assign data key inside table_data to a local variable . what if data doesnt have table_data key?? var dayByDaymetrics = data.table_data; var commaSeperatedVals = JSON.parse(JSON.stringify(self.dayByDaymetrics)); // do some computation for (index = j = 0, len = commaSeperatedVals.length; j < len; index = ++j) { i = commaSeperatedVals[index]; for (idx = l = 0, len1 = i.length; l < len1; idx = ++l) { x = i[idx]; formatedVal = self.formatNumberValues(x); commaSeperatedVals[index][idx] = formatedVal; } } var data_points = []; var ref = dayByDaymetrics; for (m = 0, len2 = ref.length; m < len2; m++) { i = ref[m]; // what i[1] & i[0] are hardcoded , very difficult to read and understand. data_points.push(i[1]); self.xlabelsDayByDayChart.push(i[0]); } var chartLoadComplete = true; var dailyTableDataLoaded = true; series = []; // again there is hard-coding of value headers[1]. series.push({ 'name': data.headers[1], 'data': data_points }); //call some external funciton to create the chart createChart("dayBydayChart", series, self.xlabelsDayByDayChart, 'column'); brk = data["size"] / 2; self.first_row = []; self.second_row = []; self.headers = data["headers"]; daily_table_headers = []; ref1 = data.headers; for (n = 0, len3 = ref1.length; n < len3; n++) { i = ref1[n]; daily_table_headers.push({ title: i }); } //call some external function to create a table dynamically yy =$('#dailytable').DataTable({
'bFilter': false,
'bInfo': false,
'bLengthChange': false,
data: commaSeperatedVals,
});

return results;
})