3
\$\begingroup\$

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,
        columns: daily_table_headers
      });

      return results;
    })
\$\endgroup\$

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.