无法访问 typeScript object 值

Question

I am working in Angular 8. I have a model class named Basic , to hold the basic information of a profile. In my component, a object of Basic type will be returned from Service , the service will get values from server. In my component when i am printing the object of Basic , it is showing that there is values, but when i am trying to access those values it is showing undefined. My Basic class has getter/setter.

Service Code

bas: Basic = new Basic();

  public getCurrentUserBasic() {
    return this.http.get<Basic>(
      'http://127.0.0.1:8080/public/profile/basic/findOneByUser', this.authService.getHeader(),
    ).subscribe((b: Basic) => {
      this.loading = false;
      console.log(b);

      // phone number
      for (const key in b['phone_number']) {
        const phoneNumber = new PhoneNumber();
        phoneNumber.$id = b['phone_number'][key]['id'];
        phoneNumber.$number = b['phone_number'][key]['number'];
        this.phoneNumbers.push(phoneNumber);
      }

      // basic information
      this.bas.$id = b['id'];
      this.bas.$name = b['name'];
      this.bas.$birthDate = b['birthDate'];
      this.bas.$gender = b['gender'];
      this.bas.$blood_Group = b['blood_Group'];
      this.bas.$religion = b['religion'];
      this.bas.$email = b['email'];
    });
  }// get current user basic.


public getBasicInformation() {
    return this.bas;
  }

Component

public setBasicInformation() {
    try {
      var basic: Basic = this.basicService.getBasicInformation();
      this.name = basic.$name;
      console.log(this.name);
      console.log('\n\n name : ' + basic['name']);
      console.log('\n\n $name : ' + basic.$name);
      this.birthDate = basic.$birthDate;
      this.gender = basic.$gender;
      console.log(basic);
    } catch (e) {
      console.log('Error in Setting Basic Information!');
    }
  }

The below lines are printing undefined .

console.log(this.name);// should not work, as property is private in model class.
console.log('\n\n name : ' + basic['name']);
console.log('\n\n $name : ' + basic.$name);

While this console.log(basic); line's result is below:

Model Class

export class Basic {
  private id: string;
  private userId: string;
  private name: string;
  private birthDate: string;
  private care_of: string;
  private gender: string;
  private maritalStatus: string;
  private profession: string;
  private blood_Group: string;
  private available: string;
  private religion: string;
  private email: string;

  /**
   * Getter $id
   * @return {string}
   */
  public get $id(): string {
    return this.id;
  }

  /**
   * Getter $userId
   * @return {string}
   */
  public get $userId(): string {
    return this.userId;
  }

  /**
   * Getter $name
   * @return {string}
   */
  public get $name(): string {
    return this.name;
  }

  /**
   * Getter $birthDate
   * @return {string}
   */
  public get $birthDate(): string {
    return this.birthDate;
  }

  /**
   * Getter $care_of
   * @return {string}
   */
  public get $care_of(): string {
    return this.care_of;
  }

  /**
   * Getter $gender
   * @return {string}
   */
  public get $gender(): string {
    return this.gender;
  }

  /**
   * Getter $maritalStatus
   * @return {string}
   */
  public get $maritalStatus(): string {
    return this.maritalStatus;
  }

  /**
   * Getter $profession
   * @return {string}
   */
  public get $profession(): string {
    return this.profession;
  }

  /**
   * Getter $blood_Group
   * @return {string}
   */
  public get $blood_Group(): string {
    return this.blood_Group;
  }

  /**
   * Getter $available
   * @return {string}
   */
  public get $available(): string {
    return this.available;
  }

  /**
   * Setter $id
   * @param {string} value
   */
  public set $id(value: string) {
    this.id = value;
  }

  /**
   * Setter $userId
   * @param {string} value
   */
  public set $userId(value: string) {
    this.userId = value;
  }

  /**
   * Setter $name
   * @param {string} value
   */
  public set $name(value: string) {
    this.name = value;
  }

  /**
   * Setter $birthDate
   * @param {string} value
   */
  public set $birthDate(value: string) {
    this.birthDate = value;
  }

  /**
   * Setter $care_of
   * @param {string} value
   */
  public set $care_of(value: string) {
    this.care_of = value;
  }

  /**
   * Setter $gender
   * @param {string} value
   */
  public set $gender(value: string) {
    this.gender = value;
  }

  /**
   * Setter $maritalStatus
   * @param {string} value
   */
  public set $maritalStatus(value: string) {
    this.maritalStatus = value;
  }

  /**
   * Setter $profession
   * @param {string} value
   */
  public set $profession(value: string) {
    this.profession = value;
  }

  /**
   * Setter $blood_Group
   * @param {string} value
   */
  public set $blood_Group(value: string) {
    this.blood_Group = value;
  }

  /**
   * Setter $available
   * @param {string} value
   */
  public set $available(value: string) {
    this.available = value;
  }


  /**
   * Getter $religion
   * @return {string}
   */
  public get $religion(): string {
    return this.religion;
  }

  /**
   * Setter $religion
   * @param {string} value
   */
  public set $religion(value: string) {
    this.religion = value;
  }

  /**
   * Getter $email
   * @return {string}
   */
  public get $email(): string {
    return this.email;
  }

  /**
   * Setter $email
   * @param {string} value
   */
  public set $email(value: string) {
    this.email = value;
  }

}//class

According to my knowledge these two lines should print values:

console.log('\n\n name : ' + basic['name']);
console.log('\n\n $name : ' + basic.$name);

while this console.log(basic); is printing values.

Answer 1

I think you are invoking setBasicInformation() before server has returned with the response in your getCurrentUserBasic() function.

In Javascript objects are passed by reference, your var basic in setBasicInformation() refers to this.bas from your service.

When you a log an object on the console it will update the value of log when base object updates eg console.log (basic) will start reflecting the value of this.bas even on console as soon as it is updated in the service.

While same is not the case when console.log for strings, it will always log the absolute value at the time of console.log being invoked.

Following two lines log strings at the time where value of basic is null, hence they are logging undefined.

console.log('\n\n name : ' + basic['name']);
console.log('\n\n $name : ' + basic.$name);

Change your setBasicInformation() to set values in the subscribe fn of getCurrentUserBasic and pipe the values through getBasicInformation()

public getCurrentUserBasic() {
      return this.http.get<Basic>(
        'http://127.0.0.1:8080/public/profile/basic/findOneByUser', this.authService.getHeader())
    }


  public getBasicInformation( b ) {
        // phone number
        for (const key in b['phone_number']) {
          const phoneNumber = new PhoneNumber();
          phoneNumber.$id = b['phone_number'][key]['id'];
          phoneNumber.$number = b['phone_number'][key]['number'];
          this.phoneNumbers.push(phoneNumber);
        }

        // basic information
        this.bas.$id = b['id'];
        this.bas.$name = b['name'];
        this.bas.$birthDate = b['birthDate'];
        this.bas.$gender = b['gender'];
        this.bas.$blood_Group = b['blood_Group'];
        this.bas.$religion = b['religion'];
        this.bas.$email = b['email'];
      return this.bas;
    }

  public setBasicInformation() {
      try {
        this.basicService.getCurrentUserBasic().pipe ( map ( this.basicService.getBasicInformation ())).subscribe ( basic => {
          this.name = basic.$name;
          console.log(this.name);
          console.log('\n\n name : ' + basic['name']);
          console.log('\n\n $name : ' + basic.$name);
          this.birthDate = basic.$birthDate;
          this.gender = basic.$gender;
          console.log(basic);
        });

      } catch (e) {
        console.log('Error in Setting Basic Information!');
      }
    }