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

Remove data from a database using Ajax in ASP.NET MVC without utilizing DataTables

TypeScript Redux Thunk: Simplifying State Management

A guide on leveraging Jest and Typescript to mock a static field within a class

What is the reason buttons in mat-menus do not submit?

What is the best way to send a function along with personalized data?

AngularJS validation for minimum character count prevents character overflow

When utilizing the Angular 9 package manager to install a package with the caret (^) in the package.json file, it may

Perform a replacement with jQuery.replaceWith() on an input field and refocus in Microsoft Internet Explorer

Run some code and then enter interactive mode

Creating dynamic transformations and animations for characters and words within a paragraph in 3D

Using Selenium to interact with a link's href attribute through JavaScript

Save documents in Firebase storage

What is the process for personalizing the appearance in cdk drag and drop mode?

The dialog box is not taking up the full width of the browser window

Should a checkbox be added prior to the hyperlink?

How can I effectively utilize the Metamask SDK with TypeScript?

Choosing an option in Angular 2 based on a specific condition

Experiencing difficulties connecting JavaScript with HTML

I am unfamiliar with this scenario but I can utilize Axios, async/await, and TypeScript to navigate it

Enhancing DOM Elements in a React Application Using TypeScript and Styled-Components with Click Event