Cannot assign value through Promises in Angular component

Question

I was trying to expose a variable into a Component HTML. The variable should go through cl.getMonitors to fetch the value from response. However, the variable Site.name was shown as initially assigned Agenda yet console.dir(res) was shown in the console. Can anyone please help?

import { Component, OnInit } from '@angular/core';
import * as Client from 'uptime-robot';

const apiKey = 'asdasdasdasdasdasd';

const cl = new Client(apiKey);

var Site = { 
  name: 'Agenda',
  status: ''
};

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css']
})

export class PostComponent implements OnInit {

  siteStatus: string; 
  siteName: string;

  constructor() { 

  }

  ngOnInit() {

    cl.getMonitors({customUptimeRatio: [1, 7, 30]}, function (err, res) {
      if (err) throw err;
      console.dir(res);

      this.siteName = res[0].friendlyname;
      this.siteStatus = res[0].status;
    });
    this.siteName = Site.name;
    this.siteStatus = Site.status;

  }

}

Answer 1

There are multiple suspicious code there. Which might be causing this issue -

1. Is sequence of req and res right ?

Lootk the following line. First argument is err and second is res . Generally it is reversed so check if the sequence is right.

  cl.getMonitors({customUptimeRatio: [1, 7, 30]}, function (err, res) {

2. Check the response format

You accessing the first index element from the response ? Is the right one or it should be like - Share your json for confirmation

  this.siteName = res.friendlyname;
  this.siteStatus = res.status;

3 this in getMonitors might have wrong context.

You are using the this to get the siteStatus and siteName however context might have been changed and it is pointing to wrong context.

You can use following syntax to get this

   cl.getMonitors({customUptimeRatio: [1, 7, 30]}, (err, res) => {
      if (err) throw err;
      console.log("this ", this);
      this.siteName = res[0].friendlyname;
      this.siteStatus = res[0].status;
    });