How to bind web api data to form select option in Angular 6

Question

My application has a form which has a select option, for the options they need to have the data from a web api. structure is:

result: Array(749)
[0 … 99]
0: "0000105862"
1: "0000105869"
2: "0000105875"
3: "0000110855"
4: "0000110856"
5: "0000110859"
6: "0000111068"
7: "0000111069"
8: "0000111077"
9: "0000112050"
etc

I am trying to bind this into the select option, I am doing this via a service, but the values are not showing up?

html structure:

<select formControlName="sys_id" class="form-select">
    <option *ngFor="let state of sys_id" [ngValue]="state">
    {{ state }}
    </option>
</select>

ts file:

public sys_id = [];

private getSys() {
    this.service.getSys(this.customer_id).subscribe((data) => {
      this.loading = true;
      console.log('Data' + data);
      this.loading = false;
      console.log('Result - ', data);
      console.log('data is received');
    })
  }

ngOnInit() {
    this.getSys();
    this.serviceForm = new FormGroup({
      customer_id: new FormControl(this.customer_id),
      sys_id: new FormControl(this.sys_id[0], Validators.required),
    });
  }

service.ts

getSys(customerId): Observable<any> {
    return this.http.get<any>(this.sysApiUrl + "?customer_id=" + customerId)
      .pipe(
        catchError(this.handleError)
      );
  }

Where are you assigning the data to your array? You should create an interface to model your sys_id objects. Then use an async pipe for the subscription. That would be the cleanest way to o it. — Nanotron
– Nanotron, Commented Mar 16, 2019 at 0:37
inside your subscription - add the data to the array, for example sys_id.push(data['value']) — Nanotron
– Nanotron, Commented Mar 16, 2019 at 0:40

bsheps · Accepted Answer · 2019-03-16 01:15:37Z

1

It looks like your sys_id is an empty array.

I think you need to assign the data in your getSys() method.

 this.service.getSys(this.customer_id).subscribe((data) => {
  this.loading = true;
  console.log('Data' + data);

  for(var i = 0; i < data.length; i++){  // loop through the object array
       this.sys_id.push(data[i]);        // push each element to sys_id
  }

  this.loading = false;
  console.log('Result - ', data);
  console.log('data is received');
})

edited Mar 16, 2019 at 1:15

answered Mar 16, 2019 at 0:43

bsheps

1,5641 gold badge18 silver badges28 bronze badges

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

7 Comments

Sole Over a year ago

the data I am getting is in this format: result: Array(749) [0 … 99] 0: "0000105862" 1: "0000105869" 2: "0000105875" 3: "0000110855" 4: "0000110856" 5: "0000110859" 6: "0000111068" 7: "0000111069" 8: "0000111077" 9: "0000112050" 10: "0000112056" 11: "0000112063"

Sole Over a year ago

I have this error: ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

bsheps Over a year ago

@Sole this is because your data is an object (not an array as assumed). You will need to loop through the object array and push each individual element. Would you like me to include this?

bsheps Over a year ago

@Sole I edited it answer and added a simple loop. This will go through the object array and push each individual element to the sys_id array.

bsheps Over a year ago

@sole Just edited it again. Had commas instead of semi colons. Sorry about that.

|

Nanotron · Accepted Answer · 2019-03-16 00:56:30Z

0

To answer your question from your comment. Now you dont have to worry about unsubscribing or subscribing. Plus you are using types which is one of the advantages of typescript.

Model.ts

export interface YourData {
name: string;
value: number;
}

component.ts

 your_array: Observable<YourData>

 ngOnInit() {
    this.your_array = yourService.getData()
 }

Service.ts

 return this.http.get<YourData>(this.sysApiUrl + "?customer_id=" + customerId)
  .pipe(
    catchError(this.handleError)
  );

template.html

 <option *ngFor="let state of sys_id | async" [ngValue]="state">

answered Mar 16, 2019 at 0:56

Nanotron

5845 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to bind web api data to form select option in Angular 6

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related