Why undefined is displayed instead of object - (Angular HTTP request)

Question

I want to get an array from Spring Boot API and I can't convert data into object properly

It's my model:

export class Uczen {

  constructor(
    public firstname: string,
    public lastname: string,
    public email: string,
    public gender: string,

  ) {  }

}

service:

getPersons() {
    return this.http.get('http://localhost:8080/myApp/persons');
}

It's my component.ts code

  osoby: Uczen[] = [];

ngOnInit() {
  this.personService.getPersons().subscribe((result: Uczen[]) => {
        for (const item of result) {
        this.osoby.push(item);
      }
  });
  console.log(this.osoby[1]);
  console.log(this.osoby.length);
}

im getting "undefined" and "0" as display,there is problem with conversion json to object array prodably ;/

Possible duplicate of How do I return the response from an asynchronous call? — JSON Derulo
– JSON Derulo, Commented Apr 10, 2019 at 6:11
console.log(this.osoby.length); is giving an output 0, which definitely means this.osoby don't have any value. Therefore, this.osoby[1] is definitely undefined. Please check if the API is returning any value. — Jacob Nelson
– Jacob Nelson, Commented Apr 10, 2019 at 6:19

Sachila Ranawaka · Accepted Answer · 2019-04-10 06:12:57Z

1

consoles should be inside the subscription since this is an asynchronous procedure

  this.personService.getPersons().subscribe((result: Uczen[]) => {
        for (const item of result) {
          this.osoby.push(item);
        }

       console.log(this.osoby[1]);
       console.log(this.osoby.length);
  });

answered Apr 10, 2019 at 6:12

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

khvr000 · Accepted Answer · 2019-04-10 07:03:02Z

In your ts file, you have ngOnInit() method, ngOnInit is component's life cycle hook which runs when component is being initialized.

1) Initially the control calls the getPersons() method and it will take some time (some milli seconds) to get response from your server.

2)Due to asynchronous behaviour, before we get response from remote server the control goes to the console statement line and it is executed. At this point of time the variable osoby is still an empty array, which is why you are getting undefined , accessing first element of empty array.

3)If you write the same console lines inside subscription, the control to those lines will go only after receiving the response from your server .

  this.personService.getPersons().subscribe((result: Uczen[]) => {
    for (const item of result) {
      this.osoby.push(item);
    }

   console.log(this.osoby[1]);
   console.log(this.osoby.length);

  });

Collectives™ on Stack Overflow

Why undefined is displayed instead of object - (Angular HTTP request)

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related