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\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.