Only pass when not undefined AngularJS

Question

In my code I am passing an Array of JSON objects from my service to my controller and then to my directive to then be visualised.

Code in Controller:

(function(){

'use strict';

angular.module('dashboardApp').controller('DownloadCtrl', DownloadCtrl);

DownloadCtrl.$inject= ['DownloadService','$scope'];

function DownloadCtrl(DownloadService, $scope){
    var self=this;      

    DownloadService.getRoutes()
      .then(function(responseData){       
        self.routes = responseData.data;   

  });

}

})();

HTML code:

<div class="container" ng-controller="DownloadCtrl">    

    <donut-chart data='download.routes'></donut-chart>

</div>

Directive Code:

angular.module('dashboardApp').directive('donutChart',function(){

    function link(scope,element,attr){
        var dataSet = scope.data;

        if(dataSet!==undefined){
            var chart = c3.generate({
                data: dataSet,
                type:'donut'
            });
        }
    };

    return {
        restrict: 'EA',
        link : link,
        scope: {
            data: '='       

        }
    };
});

If I scope.$watch $scope.data I notice that it appears once and there is no data assigned and then it appears again with data assigned to it. If I don't have the dataSet!==undefiend then the code will fail.

It works with the current setup but I feel that there is a better way than simply checking if dataSet!==undefined. I think I might of done things in the incorrect order or in the incorrect way.

I would want a way that would allow me to remove the dataSet!==undefiend

I usually use validation function that returns the function prematurely if fails if(typeof scope.data === 'undefined'){return;} it returns without anything and thusly exists the function early. This prevents unnessary indentation from all your main code that should run. Not sure if that's the solution you want though. The only other way I can think of to always rutnr a scope.data value from your datasource. — Tschallacka
– Tschallacka, Commented Dec 14, 2015 at 12:24
Thank you for the comment. I might have to do something like that. It's just in all the books or tutorials I read there isn't any checking so I assume there is something else going on. — Softey
– Softey, Commented Dec 14, 2015 at 12:25

Vivek · Accepted Answer · 2015-12-14 12:31:56Z

2

You should return from the link function if scope.data is null

function link(scope,element,attr){
    if(scope.data == null){
     return;
    }

    var dataSet = scope.data;

    var chart = c3.generate({
        data: dataSet,
        type:'donut'
    });

};

answered Dec 14, 2015 at 12:31

Vivek

13.6k19 gold badges101 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hitmands Over a year ago

I think that returning in a link function is not a good way because stops you from adding more business logic if needed...

Vivek Over a year ago

@Hitmands Wrong. If the business logic expects/operates on not null value, Its nothing wrong returning from the function.

Hitmands Over a year ago

it is a scalability question... if you need to do it in future?

Hitmands · Accepted Answer · 2015-12-14 12:40:13Z

0

Don't use return in your link function because prevents the ability to add more business logic, is not scalable in my opinion...

Just check if scope.data isn't a falsy value and then do what you need. Falsy values are: false, 0, null, undefined, ''

if you perform a check on one of these falsy values the if statement isn't satisfied.

{
  link: function postLink(scope, element, attrs) {
    if(scope.data) {
      d3.generate({
        data: scope.data
      });
    }
  }
}

answered Dec 14, 2015 at 12:40

Hitmands

14.2k4 gold badges41 silver badges78 bronze badges

Collectives™ on Stack Overflow

Only pass when not undefined AngularJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related