1

I'm building a getUserByEmail informations page. I can have the response, but I am getting an error when I try to add html.

Here is my .html:

<ion-item>
  <ion-label>Email:</ion-label>
  <ion-input [(ngModel)]="keyword" type="text" value=""></ion-input>
</ion-item>
<button (click)="getCustomerbyEmail()">Get Customer</button>

THIS IS WORKING
<p>
  {{response | json}}
</p>
THIS IS NOT WORKING
(...)
<ion-list-header text-center>
      Modifier {{response.username}}
</ion-list-header>
(...)

My customer.ts:

import {Page, NavController} from 'ionic-angular';
import {Http} from 'angular2/http';
import {Inject} from 'angular2/core'
import {CustomerService} from './customers.service';

@Page({
  templateUrl: 'build/pages/ecommerce/customers/customers.html',
  providers: [CustomerService]
})
export class CustomersPage {

  response:string;
  keyword:string;
  results:string [];
  allCustomers:boolean = false;
  http;

  constructor(public nav: NavController,  httpService:Http, private customerService:CustomerService) {
    this.customerService = customerService;
    this.http = httpService;
    this.keyword = '';
  }

  userPressedCancel() {
      this.keyword = '';
  }

  keyHasBeenPressed(e) {
      if (e.keyIdentifier === 'Enter') {
          this.customerService.getCustomersById(this.keyword)
          .subscribe(
              response => this.response = response,
              error => console.log(error));
      }
  }

  getCustomerbyEmail() {
      this.customerService.getCustomersById(this.keyword)
      .subscribe(
          response => this.response = response,
          error => console.log(error));
  }
}

And finally my customer.service.ts:

(...)
  getCustomersById(id) : Observable<any> {
    let headers = new Headers();
    return this._http.get(this._url+this.customers+'/email/'+id+this.urlBase, {
      headers : headers
    }).map(res => res.json().customer);
  }
(...)

If I do a getAllCustomers then iterate the *ngFor="#customer of response" it's working as it should.

What am I missing? Thanks. Yin

Yin
  • 437
  • 1
  • 6
  • 15
  • What does `response` look like when the callback passed to `subscribe(...)` is called? – Günter Zöchbauer May 30 '16 at 09:59
  • I get this error: EXCEPTION: Error: Uncaught (in promise): EXCEPTION: TypeError: Cannot read property 'id' of undefined in [ {{response | json}} {{response.id}} in CustomersPage@23:3] ORIGINAL EXCEPTION: TypeError: Cannot read property 'id' of undefined ORIGINAL STACKTRACE: – Yin May 30 '16 at 10:27

1 Answers1

1

Use the safe-navigation (Elvis) operator to not get an error when response is not yet set:

  Modifier {{response?.username}}
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Awesome this is working. Thank you. – Yin May 30 '16 at 10:35
  • Just one more thing, how to I display this response:{{response?.shipping_address.company}}? – Yin May 30 '16 at 11:15
  • Not sure what you mean with "display this resonse". `{{response | json}}` should display the whole `response` object. – Günter Zöchbauer May 30 '16 at 11:17
  • I'm getting an error when trying to display response?.shipping_address.company but response?.id is ok. – Yin May 30 '16 at 11:18
  • What error exactly? (for displaying `{{response?.shipping_address.company}}`, right - didn't see that part of your comment previously) – Günter Zöchbauer May 30 '16 at 11:21
  • I'm getting EXCEPTION: Error: Uncaught (in promise): EXCEPTION: TypeError: Cannot read property 'company' of null in [Société: {{response?.shipping_address.company}} in CustomersPage@46:17] ORIGINAL EXCEPTION: TypeError: Cannot read property 'company' of null – Yin May 30 '16 at 11:23
  • Hard to tell what the right strategy is here. `{{response?.shipping_address.company}}` ensures already that `response` has an actual value before `shipping_address` is evaluated. The error message seems to indicate that your `shipping_address` in your response is `null`. You can also use `{{response?.shipping_address?.company}}` but I'm not sure this is what you want. – Günter Zöchbauer May 30 '16 at 11:26
  • https://www.dropbox.com/s/67w6qippxi6qoav/Capture%20d%E2%80%99%C3%A9cran%202016-05-30%20%C3%A0%2013.31.11.png?dl=0 this is the object I'm trying to display – Yin May 30 '16 at 11:32
  • It seems unlikely that this is the actual `response` value, otherwise `shipping_address` wouldn't be `null`. – Günter Zöchbauer May 30 '16 at 11:35
  • In fact this is the response I get. I just display the response inside a

    {{response | json}}

    . I'm trying to display all the response inside a form, each value inside an input.     – Yin May 30 '16 at 11:38
  • Can you create a Plunker that allows to reproduce your problem. I don't see another way to figure out what causes the issue. You can just use a fake service with an `Observable.of(customer)` that returns the response instead of making an actual HTTP request. – Günter Zöchbauer May 30 '16 at 11:40
  • Nevermind, I forgot to change the value of the form. Thank you for your kind help! – Yin May 30 '16 at 11:41
  • Ok, glad to hear you could figure it out. – Günter Zöchbauer May 30 '16 at 11:42