Can't bind data from web api to select option in Angular

Question

I am trying to bind some data to a select option in Angular 6, I am using *NgFor for this: The Json data structure is as follows:

{  
   "addresses":[  
      {  
         "address":"xxxxxxx",
         "address_line1":"None",
         "address_line2":"None",
         "address_line3":"",
         "billing":false,
         "id":79,
         "name":"xxxxx",
         "phone_number":null,
         "postal_code":"xxxxx",
         "town":"xxxxx"
      },
   ]
}

So to bind this into my select option I am doing:

<option value="null" disabled="true" [selected]="true">Select your option</option>
<option *ngFor="let item of address" [value]="item">
    {{item.address}}
</option>

Ts file to get data:

customerAddress = []; 

private getCustomerAddress() {
    this.service.getCustomerAddress(this.customer_id).subscribe((data) => {
      console.log('Result - ', data);
      console.log('Customer address data is received');
      this.customerAddress = data;
    })
  }

Service linked to this:

  getCustomerAddress(customerId): Observable<any> {
    return this.http.get<any>(this.customerAddressApiUrl + "/" + customerId)
      .pipe(
        catchError(this.handleError)
      );
  }

There is no data being displayed in the select option? But data is fine in the console.log.

Have pasted the correct code because you should loop on customerAddress — arpit sharma
– arpit sharma, Commented Mar 21, 2019 at 10:58

moritzg · Accepted Answer · 2019-03-21 13:38:04Z

3

This is the correct way to do it:

<option *ngFor="let item of customerAddress.addresses" [value]="item">
    {{item.address}}
</option>

edited Mar 21, 2019 at 13:38

moritzg

4,4145 gold badges41 silver badges63 bronze badges

answered Mar 21, 2019 at 11:02

arpit sharma

4054 silver badges11 bronze badges

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

5 Comments

Sole Over a year ago

That gives this error: Only arrays and iterables are allowed

Sole Over a year ago

That worked thanks, although My placeholder has disappeared now?

Sole Over a year ago

That did not work unfortunately, it appears for 1 sec and then goes

arpit sharma Over a year ago

try <option value="" disabled selected>Select your option</option>

goyaltushar92 Over a year ago

for non string values use [ngValue] instead of [value] as value will not work with complex objects and you will lost type in case of numeric values.

Dharman · Accepted Answer · 2020-01-27 00:32:33Z

-2

The name of the array that your are browsing is customerAddress and not adresses

edited Jan 27, 2020 at 0:32

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Mar 21, 2019 at 11:12

Bastian Robillard

1

Collectives™ on Stack Overflow

Can't bind data from web api to select option in Angular

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related