Discover how to retrieve service response data from an API and populate it into the Select Option with Angular 2

Question

Discover how to retrieve service response data from an API and populate it into the Select Option with Angular 2

Api.services.ts

 getListOfNames() {
     return this.http.get(this.BaseURL + 'welcome/getnama')
            .pipe(map(response => {
                 return response;
            }));
 }

After making the API call, I receive the following response:

{
"status": "OK",
"Output": [
    {
        "id_pemborong": "1569079912",
        "nama": "ayub"
    },
    {
        "id_pemborong": "1569125109",
        "nama": "Hartono"
    },
    {
        "id_pemborong": "1569319859",
        "nama": "agus"
    },
    {
        "id_pemborong": "1569416787",
        "nama": "joko"
    }
   ]
 }

I am looking for guidance on how to bind this response to a Select Option in Angular. Can someone help me with this?

javascript angular typescript

Answer 1

Answer №1

procedure

fetchNames() {
    return this.http.get(this.BaseURL + 'welcome/getnama')
}

next, you should subscribe to it within your component

//declare a variable
NameList:any[]=[];

// replace service with the name of your service
this.service.function.subscribe(data => this.NameList = data);

and in the Template

<select  [(ngModel)]="selected" (change)="onChange($event)">
<option [label] ="name" *ngFor="let item of NameList" [selected]="selected" 
  [value]="name">{{name}}
</option>
</select>

Answer 2

procedure

fetchNames() {
    return this.http.get(this.BaseURL + 'welcome/getnama')
}

next, you should subscribe to it within your component

//declare a variable
NameList:any[]=[];

// replace service with the name of your service
this.service.function.subscribe(data => this.NameList = data);

and in the Template

<select  [(ngModel)]="selected" (change)="onChange($event)">
<option [label] ="name" *ngFor="let item of NameList" [selected]="selected" 
  [value]="name">{{name}}
</option>
</select>

Answer 3

Answer №2

Your map function is not working correctly in your code. To fix this, you should map the response to the Output property and then subscribe to the Observable to retrieve the value.

api.service.ts

listNama() {
    return this.http.get(this.BaseURL + 'welcome/getnama').pipe(
        map(response => response.Output)
    );
}

Next, make sure to subscribe to the Observable in your component:

import ApiService from 'path/to/api/service';
...

    namaList: Nama[];

    constructor(private apiService: ApiService) { }

    ngOnInit() {
        this.service.listNama().subscribe(data => {
            this.namaList = data;
        });
    }

You'll also need to define a type for the data received, which can be done using the Nama interface:

export interface Nama = {
    id_pemborong: string;
    nama: string;
}

Lastly, use the namaList array in your HTML template to display the list in a dropdown menu:

<select>
    <option *ngFor="let item of namaList" [value]="item.id_pemborong">{{item.nama}}</option>
</select>

Answer 4

Your map function is not working correctly in your code. To fix this, you should map the response to the Output property and then subscribe to the Observable to retrieve the value.

api.service.ts

listNama() {
    return this.http.get(this.BaseURL + 'welcome/getnama').pipe(
        map(response => response.Output)
    );
}

Next, make sure to subscribe to the Observable in your component:

import ApiService from 'path/to/api/service';
...

    namaList: Nama[];

    constructor(private apiService: ApiService) { }

    ngOnInit() {
        this.service.listNama().subscribe(data => {
            this.namaList = data;
        });
    }

You'll also need to define a type for the data received, which can be done using the Nama interface:

export interface Nama = {
    id_pemborong: string;
    nama: string;
}

Lastly, use the namaList array in your HTML template to display the list in a dropdown menu:

<select>
    <option *ngFor="let item of namaList" [value]="item.id_pemborong">{{item.nama}}</option>
</select>

Answer 5

Answer №3

Ts

    MyNameList:any[]=[];
    displayNames() {
    return this.http.get(this.BaseURL + 'welcome/getnama')
      .pipe(map(response => {
      this.MyNameList= response.Output;
      }));
     }

Html

    <select  [(ngModel)]="selected" (change)="onChange($event)">
       <option [label] ="name" *ngFor="let item of MyNameList" [selected]="selected" [value]="name">
          {{name}}
       </option>
    </select>

Answer 6

Ts

    MyNameList:any[]=[];
    displayNames() {
    return this.http.get(this.BaseURL + 'welcome/getnama')
      .pipe(map(response => {
      this.MyNameList= response.Output;
      }));
     }

Html

    <select  [(ngModel)]="selected" (change)="onChange($event)">
       <option [label] ="name" *ngFor="let item of MyNameList" [selected]="selected" [value]="name">
          {{name}}
       </option>
    </select>

Discover how to retrieve service response data from an API and populate it into the Select Option with Angular 2

Answer №1

Answer №2

Answer №3

Similar questions

javascript get the value of the text field

Unable to make a POST request to the GitHub v3 API

Each time I attempt to update my profile on the web application, I receive this notification

Children must be matched to the route before navigating to it

The render properties are not compatible with each other

Updating visual appearance with button clicks and unclicks

What is the process for using AJAX and PHP to upload an image file?

Encountering an error while trying to import GraphQL resolvers and schema

Enhancing jQuery Component while making an Ajax request

Accessing CouchDB using AngularJS requires users to sign in, with the authentication cookie only being sent to the `/_

There is no 'next' property available

Encourage users to activate the physical web feature in compatible web browsers

I'm looking for a way to send a value to my component when the onBlur event is triggered on a PrimeNG autocomplete textbox. Any

Is it possible to perform a PHP redirect after the headers have been

Update a specific form data field within an Angular application

Logging to the console using an If/Else statement, with the Else block containing code that

Is there a way to ensure an ajax call finishes executing without relying on 'async: false' or callbacks?

Tips for migrating an AngularJS application to Angular

Utilizing Angular 2 for Displaying SVG Information

Ensure to check the input file for null values before proceeding