Angular 2: How to fetch data and return single values?

Question

A Accountpage should return Data to the logged in user. I've got following code:

http.get.service.ts

getUserData() {
      const token = this.currentUser.token;

      const body = JSON.stringify({token: token});
      return this.http.post('https://test.com/src/getuserdata', body)
        .map((response: Response) => {
          const data = response.json();
          const returnArray = [];
          for (let key in data) {
            returnArray.push(data[key]);
          }
          return returnArray;
        });
    }

The Output of the called JSON File is:

{
"email":"[email protected]","lastname":"Grimes"
}

account.component.ts

export class AccountComponent implements OnInit {

  userData: any = [];

  constructor(private httpService: HttpService) { }

  ngOnInit() {
    this.httpService.getUserData()
      .subscribe(
        data => {
          this.userData = data;
        }
      );
  }

}

The response of ngOnInit is "[email protected], Grimes"

account.component.html

...
<div class="n-r-m-e" [innerText]="userData.email">
<div class="n-r-m-e-v" [innerText]="userData.lastname">
...

The div-tags return "undefinded". How can i fix this problem?

AVJT82 · Accepted Answer · 2017-03-26 15:56:51Z

1

The response is asynchronous, so view is rendered before data has been retrieved.

You could solve this in a couple of ways. Either use the Safe Navigation Operator, which will safeguard null values:

<div class="n-r-m-e" [innerText]="userData?.email"></div>
<div class="n-r-m-e-v" [innerText]="userData?.lastname"></div>

Or you could wrap your div's inside an *ngIf that won't render that part of the template unless there is values in userData

<div *ngIf="userData">
  <div class="n-r-m-e" [innerText]="userData.email"></div>
  <div class="n-r-m-e-v" [innerText]="userData.lastname"></div>
</div>

Also you could initialize the userData object, so that it will not be undefined.

answered Mar 26, 2017 at 15:56

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

1 Comment

DaFoot Over a year ago

That <thing>?.<property> notation has just allowed me to fix something I've been struggling with for hours.

amandala · Accepted Answer · 2017-03-24 22:03:07Z

0

The reason userData is undefined is because the fetch for the data is async and will not be available when the template is originally rendered.

To pass data into your template from an async operation you need to make use of observables and the async pipe.

Component: userData: Observable<any>;

Template: <account-component [userData]='userData | async'></account-component>

It would also be a good idea to make a model for the data that you are passing into the template so that you don't need to use Observable<any> and can instead use something like Observable<User>

answered Mar 24, 2017 at 22:03

amandala

152 silver badges6 bronze badges

2 Comments

Marcel Over a year ago

When i use userData: Observable<any>; i get get the error Type 'any[]' is not assignable to type 'Observable<User>'

amandala Over a year ago

Ok, are you defining a model for the data coming back from the server? If so, you will need to have the server return a User object. Try setting the type to any to see if you can get the data to come through the pipe and then define the model after to typesafe it.

Collectives™ on Stack Overflow

Angular 2: How to fetch data and return single values?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related