Angular: Cannot display the array of objects received from the Http Respnse in the HTML page of Component

Question

The component.ts file

import { Component, OnInit } from '@angular/core';
import {HttpClient, HttpErrorResponse} from '@angular/common/http'
import {Observable} from 'rxjs';
import { error } from 'selenium-webdriver';
import { HttpEventType } from '@angular/common/http/src/response';
interface Todo {
  result: string[];
}
@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})

export class UsersComponent implements OnInit {

  constructor(private http: HttpClient) { }
  results: String[];
  ngOnInit(): void {
    this.http.get<Todo>('http://localhost:3000/todos').subscribe(data => { 
      this.results = data.result;
      console.log(data);
    },    (err: HttpErrorResponse) => {
      if (err.error instanceof Error) {
        // A client-side or network error occurred. Handle it accordingly.
        console.log('An error occurred:', err.error.message);
      } else {
        // The backend returned an unsuccessful response code.
        // The response body may contain clues as to what went wrong,
        console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
      }
    }
    );
  }

}

The component.html file

<div>Works</div>
<ul>
  <li *ngFor="let result of results">{{result.text}}</li>
</ul>

I get a HTTP 304 Status code and the returned data is an array of Objects. The json data returned by the Http response:

0: Object { _id: "5a53460339ff2c2488a7bee1", text: "Invade the north tower", __v: 0, … }
1: Object { _id: "5a53464539ff2c2488a7bee2", text: "Collect invisibility rune from Dunaki", __v: 0, … }
2: Object { _id: "5a53465b39ff2c2488a7bee3", text: "Meet Shinoko", __v: 0, … }
3: Object { _id: "5a53585a62ce2331a889556e", text: "xyz", __v: 0, … }
4: Object { _id: "5a5450ce486ddb1e184567ae", __v: 0, date: "2018-01-09T05:19:10.713Z" }

The data is retrieved and stored in the component's results array, but it is not displayed in the html. While observing the console, I noticed that the html was rendered first and the response was received after that. But I have mentioned the retrieval logic in the ngOnInit(). Please guide me, thank you!

The console prints the above array. Anyways, I was wrong to use this.results = data.result, since the data had no result property. — Shahaji
– Shahaji, Commented Jan 9, 2018 at 9:02

DeborahK · Accepted Answer · 2018-01-09 08:11:32Z

1

Shouldn't this line:

this.results = data.result;

Be just this:

this.results = data;

You are showing just data in the console.log and I don't see that it has a result property?

UPDATE from comments below: This is the code from the example linked in the comments to this post:

http.get<ItemsResponse>('/api/items').subscribe(data => {
  // data is now an instance of type ItemsResponse, so you can do this:
  this.results = data.results;
});

edited Jan 9, 2018 at 8:11

answered Jan 9, 2018 at 7:51

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

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

7 Comments

Dakota Over a year ago

Maybe , items are contained in data.result

DeborahK Over a year ago

Not if the console.log displayed the above-shown output. Or maybe the "json data returned" shown above wasn't from that console.log?

Shahaji Over a year ago

I followed this guide angular.io, where it says that the data which we get from the request is instance of Todo interface.

Shahaji Over a year ago

data.result is an array of Objects

DeborahK Over a year ago

If you are following that example exactly, then it is data.results (plural), not data.result, singular. I updated my answer with a relevant snippet from that link.

|

Canberk Dogmus · Accepted Answer · 2018-01-09 08:02:43Z

0

You must fill list in ngAfterViewInit() method. That's why ngOnInit works first. And after HTML has been loaded, ngAfterViewInit works.

edited Jan 9, 2018 at 8:02

answered Jan 9, 2018 at 7:50

Canberk Dogmus

559 bronze badges

4 Comments

DeborahK Over a year ago

The data binding will cause the display to update whenever the data is retrieved. No need to move it to AfterViewInit.

Canberk Dogmus Over a year ago

Oh, it's true but i couldn't solve it this way. AfterViewInit had worked for me :)

DeborahK Over a year ago

I'd be interested to see a data retrieval issue solved by moving the code to the AfterViewInit. Could you post some sample code?

Canberk Dogmus Over a year ago

I can say that, I fill lists used in HTML, in function connected to AfterViewInit(). And may not be a right use, i'm new about Angular :)

Collectives™ on Stack Overflow

Angular: Cannot display the array of objects received from the Http Respnse in the HTML page of Component

2 Answers 2

7 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related