Angular data undefined

Question

I have a problem with some code:

I want to make a quotation with retrieving three collections items from DB. (function to load are ok).

The first one works, but the next two (which needs data from the first) are not working. It says undefined.

Here is the code:

ngOnInit() {
    let id = this.route.snapshot.paramMap.get('id');

    this.campaignService.getOneCampaign(id).then(
      (campaign: Campaign) => {
        this.campaign = campaign;
        if (campaign.camptype = "VIDEO") {
          this.unitcostvid = (Math.round(this.campaign.unitcost * this.campaign.durationvid * 10000)) / 10000;
          this.totalcost = this.unitcostvid * this.campaign.nbuser;
        }
        if (campaign.camptype = "MAIL") {
          this.unitcostvid = this.campaign.unitcost;
          this.totalcost = this.unitcostvid * this.campaign.nbuser;
        }
        if (campaign.status = "EA") {
          this.eacamp = true;
        }

        return this.campaign;
      }
    )
    if (this.campaign) {
      this.usercService.getSingleUserc(this.campaign.usercidvalidate).then(
        (userc: Userc) => {
          this.userc = userc;
          return this.userc;
        }
      )
    }
    if (this.campaign) {
      this.companyService.getCompanybycoid(this.campaign.coid).then(
        (company: Company) => {
          this.company = company;

          return this.company;
        }
      )
    }
  }

I want to have campaign, company and userc values, but I only get campaign

Please help me.

Your if statements are outside of the promise scope so they may be executed before the 'then' function — Kelo, Aug 30 '19 at 14:51

score 0 · Answer 1 · answered Aug 30 '19 at 14:50

0

First please change the campaign.camptype = "VIDEO" to campaign.camptype == "VIDEO" campaign.camptype = "MAIL" to campaign.camptype == "MAIL" campaign.status = "EA" to campaign.status == "EA"

then run again

answered Aug 30 '19 at 14:50

John Meek

173
1
9

This part works. – BenYsil Sep 02 '19 at 13:10

score 0 · Answer 2 · answered Aug 30 '19 at 14:55

You have assigning campaign in then section, but trying to use them as a next statement which happens before then section executes. Move it all inside like this:

ngOnInit() {
    let id = this.route.snapshot.paramMap.get('id');

    this.campaignService.getOneCampaign(id).then(
        (campaign: Campaign) => {
            this.campaign = campaign;
            if (campaign.camptype === "VIDEO") {
                this.unitcostvid = (Math.round(this.campaign.unitcost * this.campaign.durationvid * 10000)) / 10000;
                this.totalcost = this.unitcostvid * this.campaign.nbuser;
            }
            if (campaign.camptype === "MAIL") {
                this.unitcostvid = this.campaign.unitcost;
                this.totalcost = this.unitcostvid * this.campaign.nbuser;
            }
            if (campaign.status === "EA") {
                this.eacamp = true;
            }

            // no need to return this
            //return this.campaign;

            if (this.campaign) {
                this.usercService.getSingleUserc(this.campaign.usercidvalidate).then(
                    (userc: Userc) => {
                        this.userc = userc;
                        return this.userc;
                    }
                )
            }
            if (this.campaign) {
                this.companyService.getCompanybycoid(this.campaign.coid).then(
                    (company: Company) => {
                        this.company = company;

                        return this.company;
                    }
                )
            }
        }
    )
}

and I changed = to === as I suppose you wanted to compare and not assign...

score 0 · Answer 3 · answered Aug 30 '19 at 14:55

There are 2 problems.

The first is that you are setting the values in some of your if statements, rather than checking for equality.

The second, and the reason for campaign being undefined is that the code that uses it runs before the code that sets it. As you are using a Promise, the code within the then is running after the data is finished loading in your service.

To get around this, you can set the users and company within your then callback function:

ngOnInit() {
    let id = this.route.snapshot.paramMap.get('id');

    this.campaignService.getOneCampaign(id).then(
      (campaign: Campaign) => {
        this.campaign = campaign;
        if (campaign.camptype == "VIDEO") {
          this.unitcostvid = (Math.round(this.campaign.unitcost * this.campaign.durationvid * 10000)) / 10000;
          this.totalcost = this.unitcostvid * this.campaign.nbuser;
        }
        if (campaign.camptype == "MAIL") {
          this.unitcostvid = this.campaign.unitcost;
          this.totalcost = this.unitcostvid * this.campaign.nbuser;
        }
        if (campaign.status == "EA") {
          this.eacamp = true;
        }

        if (this.campaign) {
            this.usercService.getSingleUserc(this.campaign.usercidvalidate).then(
              (userc: Userc) => {
                this.userc = userc;
              }
            )
          }

          if (this.campaign) {
            this.companyService.getCompanybycoid(this.campaign.coid).then(
              (company: Company) => {
                this.company = company;
              }
            )
          }
      }
    )
}

Angular data undefined

3 Answers3