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.
Do I need to include multiple try-catch statements in this code & break it into multiple smaller functions?
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,
columns: daily_table_headers
});
return results;
})