Angular 4 Displaying Data From Rest API

Question

I'm having problems displaying data from my local express.js REST API, which is structured like this:

 people: [{ surname: 'testsurname', name: 'testname', email: 
 '[email protected]', status: 1, activity: 'Office' }

I have a people service where I get the data, it looks like this:

export interface People {
  surname: String;
  name: String;
  email: String;
  status: Boolean;
  activity: String;
}

@Injectable()
export class PeopleService {

private _peopleURL = "http://localhost:8080/api/people";

constructor(private http: HttpClient) {
console.log('init PS')
}

getPeople(): Observable<People[]> {
return this.http
    .get(this._peopleURL)
    .map((response: Response) => {
        return <People[]>response.json();
    })
  }


}

This is my PeopleComponent.ts code

export class PeopleComponent implements OnInit {
  _peopleArray: People[];

  constructor(private ps: PeopleService)
   { }

   getPeople(): void {
    this.ps.getPeople()
        .subscribe(
            resultArray => this._peopleArray = resultArray,
            error => console.log("Error :: " + error)
        )
}


  ngOnInit(): void {
    this.getPeople();
  }

Now I'm trying to display the data (i.e. the name) in my 'People' component.html like so:

<div> {{people.name}} </div>

When I start my app I get an error saying

'TypeError: Cannot read property 'name' of undefined at Object.eval [as updateRenderer]

Can anyone explain to me what I missed and what I need to be doing in order to display the data?

@HrishikeshKale Yes, but then I'm getting "Cannot read property '0' of undefined" — Jeremy
– Jeremy, Commented Feb 8, 2018 at 8:46
If using HttpClient i would suggest: return this.http.get<People[]>(this._peopleURL , { observe: 'body', responseType: 'json'}); this way you don't need to .map() — Krzysztof Krawiec
– Krzysztof Krawiec, Commented Feb 8, 2018 at 8:46

santosh singh · Accepted Answer · 2018-02-08 09:13:29Z

1

You response is json array .try following code snippet.

<div *ngFor ="let p of people">
      <div> {{p.name}} </div>
   </div>

Update

Change your service method as shown below.The default value that returns new HttpClient is Object. It automatically calls response.json() internally.

getPeople(): Observable<People[]> {
    return this.http
      .get<People[]>(this._peopleURL);

  }

Check out following working demo

WORKING DEMO

edited Feb 8, 2018 at 9:13

answered Feb 8, 2018 at 8:50

santosh singh

28.8k27 gold badges88 silver badges134 bronze badges

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

3 Comments

Jeremy Over a year ago

Thank you! Now I'm getting an error saying "Error :: TypeError: response.json is not a function"... any headers to what I did wrong?

santosh singh Over a year ago

Try to import 'rxjs/add/operator/map' That should fix the problem.

Jeremy Over a year ago

Thank you, this helps me plenty!

Roberto Zvjerković · Accepted Answer · 2018-02-08 08:52:14Z

0

You don't even have "people" field in your component, you're setting it to "_peopleArray".

But even if you change it to

<div> {{_peopleArray.name}} </div>

it still won't work since _peopleArray is, well, an array.

You can iterate over array objects with *ngFor or access only first or nth element of the array like so

<div> {{_peopleArray[0].name}} </div>

answered Feb 8, 2018 at 8:52

Roberto Zvjerković

10.2k4 gold badges31 silver badges49 bronze badges

3 Comments

Jeremy Over a year ago

Thank you! Now I'm getting an error saying "Error :: TypeError: response.json is not a function"... any headers to what I did wrong?

Roberto Zvjerković Over a year ago

Can you console.log your response before trying to access it's data with .json()?

Roberto Zvjerković Over a year ago

You shouldn't "return" anything from your Observable. Change your service method to this: " return this.http .get(this._peopleURL) .map((response: Response) => { <People[]>response.json(); }) } "

Juan Garcia · Accepted Answer · 2018-02-08 08:55:24Z

0

You should do this to print your JSON structure "Array of object"

   <div *ngFor ="let person of _peopleArray">
      <div> {{person.name}} </div>
   </div>

edited Feb 8, 2018 at 8:55

answered Feb 8, 2018 at 8:49

Juan Garcia

596 bronze badges

1 Comment

AVJT82 Over a year ago

There's no need for safe navigation operator here :)

Collectives™ on Stack Overflow

Angular 4 Displaying Data From Rest API

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related