CODEWITHSUNDEEP
angularjsforeachangular-promise
user7370387
user7370387

Reputation: 99

AngularJs forEach logic, not so academic but working

I've got this code working, but i don't think it is the right way to do. I think i need to use $q, but it is difficult to understand for me .

I receive correctly this nice array of json (data.data) from my angularJs factory, from my php server-mysql backend . It is some rendez-vous with a start date:

   [{"id":"1","title":"Loi Travail","infos":null,
     "adresse":"12 avenue des lis 78013  paris",
     "criticite":"4","fichiers":null,
     "start":"2017-06-11T22:37:59.012Z"},
    {"id":"17","title":"jjtyjyjt","infos":"jytjjyjyj",
     "adresse":"tjtyjjyj","criticite":"7","fichiers":"",
     "start":"2017-06-11T22:37:59.012Z"}]

The problem is that angular-material-datetimepicker doesn't recognise the start date, because it is a string, so i need to do a loop to add new Date(), for converting each of my "start" elements.

So, i've done this short code, that is working :

    rdvFactory.get_rdvs().then(function(data){ 

        $scope.events = data.data;

        angular.forEach($scope.events,function(value,index){

            value.start = new Date(value.start);

        })
   })

It is working, meaning that i can see all of the rendez vous appearing inside angular-material-datetimepicker, but i don't think it is the right way to do, because I'm changing several time the scope(2 way binding) each iterations of angular.forEach, i suppose it is very consuming.

I think i should do a foreach on data.data for converting the dates, and after it is finished, i should set up $scope.events only after that .

I don't know if you see what i mean, but it is difficult to work with $q, i would appreciate if somebody could explain me $q a little more because even with the examples given on stackoverflow, i t is really difficult to understand the syntax.

Question : Do you think it is better to add a second .then like this ?

rdvFactory.get_rdvs().then(function(data){ 
    $scope.events = data.data;
    }).then(function(data){
        angular.forEach($scope.events,function(value,index){
            value.start = new Date(value.start);
        })
});

In this last example, do you think the second.then really wait for $scope.events to get populated ? I'm not sure ... It is working but it is the right way to do to avoid performances problems ?

Have a nice day

Upvotes: 0

Views: 44

Answers (1)

Ritesh Bhatnagar
Ritesh Bhatnagar

Reputation: 11

Nick - you are right, changing a $scope variable is costly and would generate unnecessary digest cycles. I would suggest you do this instead - 

rdvFactory.get_rdvs().then(function(data){
    var tempData = data.data;  // A temp local variable

    angular.forEach(tempData ,function(value,index){
        value.start = new Date(value.start);
    }

    $scope.events = tempData; // assign the final JSON to scope variable.
})

With regards to $q, its used mainly to combine two or more AJAX responses and then perform the operation. For example -

If there is an AJAX call to fetch User Details (based on ID) & another call to fetch User access rights (based on ID), then we may want to fire them together as both needs to be success for a user to login.

Incorrect flow - 

Fetch User details.on success then( 
   //fetch user access right // on success of user details call fire user access rights.
)

Instead, you queue both the calls in an array and wait for both of them to pass or fail together.

$q = [call1, call2]
$q.then ( 
    //on success, we know that user is correct and has right user access. 
)

Upvotes: 1

Related Questions