Angular - Bind Dropdown or select to API (database)

Question

I was on a project with Angular and a backend.

If I enter a list in the ts file:

this.towns = [{
       code: '1',
       label: 'Paris'
   },
   {
       code: '0',
       label: 'Vancouver'
   }
 ];

I can display them in my html but not if I try to connect to a db:

<select  class="selectpicker dropdown mt-4 ml-3" id="town">
   <option *ngFor="let town of towns" [value]="town.id">{{town.name}}</option>
</select>

In my ts file, I tried:

export class TestComponent implements OnInit {
 
  form: FormGroup;
  towns: { id: number, name: string }[];
 
  constructor(
    private http: HttpClient
  ) { }
 
  towns: Town[];
  apiUrl = 'https://localhost:8000/api/';
 
  ngOnInit(): void {
    this.form = new FormGroup({
      town: new FormControl()
    });
    this.getTown();
  }
 
  onClickTown(): Observable<any> {
    console.log(this.form)
    return this.http.get(this.apiUrl + 'towns')
  }
 
  getTown() {
    this.http.get<any[]>(this.apiUrl + 'towns')
      .subscribe(data => {
        this.towns = data;
        console.log(data)
      });
  }
 
  postData() {
    console.log("data");
    this.http.post<any[]>(this.apiUrl, {}).
      subscribe(
        (data: any[]) => {
          // console.log(data);
        }
      )
  }

Did I forget a step? Thanks

Why do you declare the towns property two times?! towns: { id: number, name: string }[]; and towns: Town[]; — Rami Assi
– Rami Assi, Commented May 31, 2021 at 6:59
@ArmenStepanyan, getData?I have a getTown and in my console it shows: link like this. — Sam Bath
– Sam Bath, Commented May 31, 2021 at 7:37
@RamiAssi, that might be because I tried many things and forgot to take the wrong ones down. Thanks. I missed it — Sam Bath
– Sam Bath, Commented May 31, 2021 at 7:38

Rami Assi · Accepted Answer · 2021-05-31 06:53:15Z

2

This is because changes are not detected. You can try reinitializing the towns array so that Angular detects changes.

getTown() {
  this.http.get<any[]>(this.apiUrl + 'towns')
    .subscribe(data => {
      /* reinitialize the towns array */
      this.towns = [];
      /****/
      this.towns = data;
      console.log(data)
    });
}

answered May 31, 2021 at 6:53

Rami Assi

1,1712 gold badges12 silver badges21 bronze badges

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

3 Comments

Sam Bath Over a year ago

I tried your solution and didn't get progress but noticed a new error "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." that apparently could be solved if I put "| async" in my ngFor but didn't.

Rami Assi Over a year ago

This means that the returned data is apparently not an array. The problem is definitely not in the answer. Please include the output of console.log(data) in your question

Rami Assi Over a year ago

The returned data shown in your screenshot is not an array. It is an object. Make sure that you are calling the right API method or you might need to provide extra parameters.

ShayD · Accepted Answer · 2021-05-31 08:47:29Z

1

Try the code below.

I've used the async pipe to iterate. (Notice you should return Observable for that) I've also used the ngValue attribute to bind to the form

HTML

<select formControlName="town">
  <option *ngFor="let town of towns | async" [ngValue]="town">{{town.name}}</option>
</select>

TS interface

exprot interface Town{
  id:number;
  name:string;
}

TS Component

export class TestComponent implements OnInit {

  form: FormGroup;
  towns:Observable<Town[]>;
  apiUrl:string = 'https://localhost:8000/api/';

  constructor(private http: HttpClient) { }

  ngOnInit(): void {        
    this.towns = this.http.get<Town[]>(this.apiUrl + 'towns');        
    this.form = new FormGroup({
      town: new FormControl()
    });
  }

edited May 31, 2021 at 8:47

answered May 31, 2021 at 8:20

ShayD

82910 silver badges22 bronze badges

1 Comment

Sam Bath Over a year ago

thanks. I tried the |async and changed on my getTown function:

Sam Bath · Accepted Answer · 2021-05-31 09:22:09Z

0

I changed my getTown function to solve it and so my html:

  getTown() {
    this.townsObs = this.http.get<any[]>(this.apiUrl + 'towns').subscribe(data => {
        this.towns = data['hydra:member'];
        console.log(data['hydra:member'])
      });
  }

Thanks to you all

answered May 31, 2021 at 9:22

Sam Bath

1132 silver badges10 bronze badges

Collectives™ on Stack Overflow

Angular - Bind Dropdown or select to API (database)

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related