how to get ForEach Loop and SetTimeout working with Angular 6

Question

I knew this question may have been asked before but believe most thread I search here does not address my issue.

I have angularjs code that I want to move to angular 6. All I want is to implement the Foreach loop in angular6 judging from angularjs code below

Angularjs code

                 setTimeout(function() {
                        $scope.$apply(function(){


                        angular.forEach(res.data,function(item) {
                            $scope.crud_s.push(item);
                        });  

                        });
                    },500);

This is what I have tried in angular6

      getRecord(): void {
    this.crudService.getAll().subscribe(
        res => {
            this.crud_s = res;

// starting code issue


                                 setTimeout(function()=>{ 
                                    this.$apply(function(){ 

                                    angular.forEach(this.crud_s,function(item) {
                                       this.crud_s.push(item);
                                    }); 

                                    });
                                },500); 

    //end code issue

    //more codes will continues
     }

If moving from angularJs to angular6, please read what will be the equivalents of $scope/$apply. There are changeDetector references. But do you really need that? If there's a setTimeout() there will an auto change detection by angular itself. Also you will loose this reference if you are using functions. Please see arrow functions of ES6. — Ashish Ranjan
– Ashish Ranjan, Commented Oct 25, 2018 at 2:30
And what is res.data? Response from an HTTP request? Plain Array? — Ashish Ranjan
– Ashish Ranjan, Commented Oct 25, 2018 at 2:34
yes. this is how the Angularjs code is $scope.getPosts = function(){ $http({ method: 'post', url: 'getData.php', data: {info:$scope.info} }).then(function successCallback(res) { setTimeout(function() { $scope.$apply(function(){ angular.forEach(res.data,function(item) { — jmarkatti
– jmarkatti, Commented Oct 25, 2018 at 2:43
Okay, so after understanding the differences use something like: for(let eachKey in res.data) {} can use this for both arrays and objects — Ashish Ranjan
– Ashish Ranjan, Commented Oct 25, 2018 at 2:54

Sajeetharan · Accepted Answer · 2018-10-25 02:17:33Z

1

There is no angular.forEach availabile with Angular6, you need to use for loop. Also you are trying to push to same item to the same array, make sure the variable is different.

for(let item of this.crud_s){
  this.crud_s.push(item);  //this.crud_s should be new array
}

answered Oct 25, 2018 at 2:17

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

3 Comments

jmarkatti Over a year ago

Sir, its seems that angular6 is not recognizing the code below setTimeout(function()=>{ this.$apply(function(){ it says this.$apply is not define. can you help me further with the timeout and $scope.apply function equivalent in Angular6. between thanks. waiting for your response

Sajeetharan Over a year ago

you need setInterval(()=>{ },10000)

Sajeetharan Over a year ago

did the answer helpe

Pinki Dhakad · Accepted Answer · 2019-12-03 06:51:58Z

1

Angular 6 uses Typescript as base language, so you need to write your code in with ts syntex. For "forEach" look you can write

let myArray = [1,2,3,4,5];
myArray.forEach((item) => {
  console.log(item);
});

and setTimeOut will be like that:

setTimeout(() => { //enter your forEach loop here }, 1000);

Also you do not need $apply and $digest here. Angular provide diffrent life cycle hooks here. Hope this will help you.

answered Dec 3, 2019 at 6:51

Pinki Dhakad

1505 bronze badges

Collectives™ on Stack Overflow

how to get ForEach Loop and SetTimeout working with Angular 6

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