Why my array is still empty even though I had assign value to this array in my controller? (I am using angularjs, not angular)

Question

This question took me one day to debug it, but still no luck.

Problem: this.gridOptions.data = this.allTemplatesFromClassificationRepo ; **this.allTemplatesFromClassificationRepo ** is still a empty array. Before this line of code executes, I have call activate() function to assign array to **this.allTemplatesFromClassificationRepo **. Please see this line this.allTemplatesFromClassificationRepo = templateReorderProperties;

P.S. Although I cannot get the value of allTemplatesFromClassificationRepo in controller, but I can get the value of it in html.

namespace app.admin {
'use strict';

class FooController {
    static $inject: Array<string> = [];

    constructor() {
        this.activate();
    }

    activate() {
        this.getData();

        this.classificationFoo = this.data[0];

        this.getTemplateFromGivenRepo(this.classificationFoo.id, this.classificationFoo.displayName);

        this.populateData();
    }

    data: any;

    classificationFoo: any;

    allDataFromclassificationFoo: any = [];

    // demo grid
    gridOptions = {
        enableFiltering: true,
        },
        data: []
    };

    populateData() {
            this.gridOptions.data = this.allTemplatesFromClassificationRepo ;
    }

    getData() {
        this.fooService.getUserData();
        this.data = this.fooService.userdata;
    }

    getTemplateFromGivenRepo(fooId: string, fooName: string) {
        switch (fooId) {
            case 'FOO':
                this.TemplateApi.templatesAvaiableForRepoIdGET(fooId).then(data => {
                    data.forEach(element => {
                       element.fooName = fooName;
                    });

                    let templateReorderProperties = data

                    this.allTemplatesFromClassificationRepo = templateReorderProperties;
                }, error => {

                });
                break;

            default:
                break;
        }
    };
}

class Bar implements ng.IDirective {
    static $inject: Array<string> = [];

    constructor() {
    }

    bindToController: boolean = true;
    controller = FooController;
    controllerAs: string = 'vm';
    templateUrl: string = 'app/foo.html';

    static instance(): ng.IDirective {
        return new Bar();
    }
}

angular
    .module('app.admin')
    .directive('bar', Bar.instance);

}

I suspect that the `this` in the function where `this.allTemplatesFromClassificationRepo` is written is a different `this` than you expect it to be. (@see: https://stackoverflow.com/questions/36489579/this-within-es6-class-method) — birdspider, Sep 14 '17 at 16:40
@birdspider Any solution for me? I have no idea how to fix it and I tried my best — FullStackDeveloper, Sep 14 '17 at 16:43
To test the theory about 'this' try just above you switch (1st line of method) and write `let _this = this` and when you assign the array do `_this. allTemplatesFromClassificationRepo = templateReorderProperties` — cYrixmorten, Sep 14 '17 at 16:50
Notice the underscore :) want you to save and use the this instance of the outer scope — cYrixmorten, Sep 14 '17 at 16:54

RIYAJ KHAN · Accepted Answer · 2017-09-15T05:02:47.077

2

getTemplateFromGivenRepo is async operation.

Move this.populateGridData(); call inside getTemplateFromGivenRepo after

this.allTemplatesFromClassificationRepo = templateReorderProperties;

getTemplateFromGivenRepo(repoId: string, repoName: string) {
            switch (repoId) {
                case 'CLASSIFICATION':
                    this.TemplateApi.templatesAvaiableForRepoIdGET(repoId).then(data => {

                        this.allTemplatesFromClassificationRepo = templateReorderProperties;
                        this.populateGridData(); // call here
                    }, error => {

                    });
            }
        };

OR

You can return promise from getTemplateFromGivenRepo and in then able success callback,call this.populateGridData();

edited Sep 15 '17 at 05:02

answered Sep 14 '17 at 17:16

RIYAJ KHAN

15,032
5
31
53

Wow. Your first solution works great. You save my day. Thanks a lot. Could you please give me some tutorial or article about your solution? (async operation) – FullStackDeveloper Sep 14 '17 at 17:22
https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/14220323#14220323 This will over all possible scenario – RIYAJ KHAN Sep 14 '17 at 17:25
Thanks. I am looking into the link you sent to me. – FullStackDeveloper Sep 14 '17 at 17:26

Maxim Shoustin · Answer 2 · 2017-09-14T16:49:10.000

0

I think the problem is in this instance that different inside Promise resolve.

Try to write in beginning something like:

var self = this;

and after that change all this to self key.

a.e.:

self.gridOptions.data = self.allTemplatesFromClassificationRepo;

// and so on ...

By this way you will guarantee that you use same scope instance

Hope it will work

edited Sep 14 '17 at 16:49

answered Sep 14 '17 at 16:46

Maxim Shoustin

77,483
27
203
225

Could you let me know where should I put 'let self = this;' in my code? – FullStackDeveloper Sep 14 '17 at 16:49
1st row in constructor implementation `constructor(private repoEventService, private TemplateApi, private $filter) { var self = this; self.activate(); ... }` – Maxim Shoustin Sep 14 '17 at 16:49
I tried what you suggested, but I received this error: 'TS2339, Property 'xxx' does not exist on type 'Windows' ' – FullStackDeveloper Sep 14 '17 at 16:56

Why my array is still empty even though I had assign value to this array in my controller? (I am using angularjs, not angular)

2 Answers2