Unable to get this.array variable in TypeScript- Angular 4 application

Question

I'm unable to get this.array variable in TypeScript-Angular 4 application.

Here this.services.push throws an error as this.services is undefined.

This is my code:

export class ServersComponent implements OnInit {
  //Initializing the typescript array
  services: ServerProperties[] = [];
  jQuery.each( array, function( key, value ) {
      //Using this.services to push the data which throws error as this.services undefined.
      //Trying to push the object created
      this.services.push(new ServerProperties(JSON.stringify(value.serviceName), JSON.stringify(value.state),
         JSON.stringify(value.domainName), JSON.stringify(value.releaseVersion),
         JSON.stringify(value.creationDate), JSON.stringify(value.BISERVICEURL), JSON.stringify(value.editionDisplayName)));
  });
}

export class ServerProperties {
  public serviceName: string;
  public state: string;
  public domainName: string;
  public releaseVersion: string;
  public creationDate: string;
  public BIServiceURL: string;
  public editionDisplayName: string;

  constructor(serviceName: string, state: string, domainName: string, releaseVersion: string, creationDate: string,  BIServiceURL: string, editionDisplayName: string) {
    this.serviceName = serviceName;
    this.state = state;
    this.domainName = domainName;
    this.releaseVersion = releaseVersion;
    this.creationDate = creationDate;
    this.ServiceURL = BIServiceURL;
    this.editionDisplayName = editionDisplayName;
  }
}

import { Component, OnInit } from '@angular/core';
import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';
import {JQueryStyleEventEmitter} from 'rxjs/observable/FromEventObservable';
import {ServerProperties} from './servers.module';
declare var jQuery: any;


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

@Injectable()
export class ServersComponent implements OnInit {
  allowNewUser= false;
  storeValue: ServerProperties[] = [];
  serverCreationStatus= 'No Server was created! ';
  serverName= '';
  static podServiceName= '';
  static podState= '';
  static podDomainName= '';
  static podReleaseVersion= '';
  static podCreationDate= '';
  static podBIServiceURL= '';
  static podeditionDisplayName= '';
  myJSON= '';
  //declaring server properties array 
  services: ServerProperties[] = [];

  Service_Instances= '';

  total_services= new Array();
  Service_Instances2= '';
  serverCreated= false;
  podPro= {};
  dict= {};

  constructor(private http: Http) {}

  setValues(array){
    jQuery.each( array, ( key, value ) => {
      console.log('Jquery Output 1st' + key + ': ' + value.state );
      console.log('Jquery Output 1st' + key + ': ' + value.serviceName );
      console.log('Jquery Output 1st' + key + ': ' + value.domainName );
      console.log('Jquery Output 1st' + key + ': ' + value.releaseVersion );
      console.log('Jquery Output 1st' + key + ': ' + value.creationDate );
      console.log('Jquery Output 1st' + key + ': ' + value.BI_SERVICE_URL );
      console.log('Jquery Output 1st' + key + ': ' + value.editionDisplayName );
      // this.total_services.push(value.state);
      //  this.total_services.push(value.serviceName);
      //  this.total_services.push(value.domainName);
      //  this.total_services.push(value.releaseVersion);
      //  this.total_services.push(value.creationDate);
      ServersComponent.podState = JSON.stringify(value.state);
      ServersComponent.podServiceName = JSON.stringify(value.serviceName);
      ServersComponent.podDomainName = JSON.stringify(value.domainName);
      ServersComponent.podReleaseVersion = JSON.stringify(value.releaseVersion);
      ServersComponent.podCreationDate = JSON.stringify(value.creationDate);
      ServersComponent.podBIServiceURL = JSON.stringify(value.BI_SERVICE_URL);
      ServersComponent.podeditionDisplayName = JSON.stringify(value.editionDisplayName);
      console.log('Pod State check' + ServersComponent.podState);
      this.services.push(new ServerProperties(JSON.stringify(value.serviceName), JSON.stringify(value.state),
          JSON.stringify(value.domainName), JSON.stringify(value.releaseVersion),
          JSON.stringify(value.creationDate), JSON.stringify(value.BI_SERVICE_URL), JSON.stringify(value.editionDisplayName)));
    });
  }

  ngOnInit() {
  }

  onCreateServer(){
    this.serverCreationStatus = 'Server Instance Created! ' + this.serverName;
    //Trying to get the JSON Response
    return this.http.get('http://127.0.0.1:5000/PodChecker').subscribe( (response: Response) => {
        console.log(response);
        const data = response.json();
        console.log(data);
        this.Service_Instances = data;
        this.dict = data;
        console.log('Data[services]' + JSON.stringify(data['services']));
        console.log(this.dict);
        this.Service_Instances = this.dict['services'];
        //this.setValues(this.dict['services']);
        console.log('Must Check' + JSON.stringify(this.setValues(this.dict['services'])));
        console.log('This Services Output:' + JSON.stringify(this.services ));
      },

      (error) => console.log(error)
    );
  }

  onUpdateServerName(event: Event){
    this.serverName = (<HTMLInputElement>event.target).value;
  }

}

score 1 · Accepted Answer · edited May 23 '17 at 12:10

1

jQuery.each( array, function( key, value ) {

should be

jQuery.each( array, ( key, value )=> {

If you use function the enclosing this will refer to that functions "instance"

Suggested reading: How to access the correct `this` context inside a callback?

edited May 23 '17 at 12:10

Community

1
1

answered May 10 '17 at 10:13

eko

39,722
10
72
98

Here the problem is i'm unable to push / set the ServerProperties object this.services is undefined is what i get! – Raghavendra S S May 10 '17 at 10:14
@RaghavendraSS can you upload your full ServersComponent component? – eko May 10 '17 at 10:16
Yeah basically i get a nested json object and i'm tring to extract vaules out of it, then i pass it to ServerProperties contructor, but i'm unable to do a this.services push( new ServerProperties()) – Raghavendra S S May 10 '17 at 10:19
@RaghavendraSS 1-) Did you try my answer? 2-) Where are you making this assignment? Can you edit your question and show your full ServersComponent code? – eko May 10 '17 at 10:21
Wow !! that's fantastic your solution worked :D What am i missing? – Raghavendra S S May 10 '17 at 10:27
@RaghavendraSS Check the link I've given for a detailed answer. It's a `this` scope issue – eko May 10 '17 at 10:27
Wow That's fantastic !! – Raghavendra S S May 10 '17 at 10:37
Actually there's one more problem in ngFor every time i do the iteration it appends to the existing one, however i want to just update the value. Is there any way to do it? – Raghavendra S S May 10 '17 at 10:41
@RaghavendraSS well you are iterating over an array and pushing values to an another array. You need to delete the existing values I guess but need to check the issue in detail : / – eko May 10 '17 at 11:27
Yeah i'm thinking of doing a poll from the client end ! i'm not sure how to implement it. – Raghavendra S S May 10 '17 at 12:20

Unable to get this.array variable in TypeScript- Angular 4 application

1 Answers1