извлечение и отображение данных бэкэнда json в виде раскрывающегося списка в проекте Ioni c

Question

Я работаю в проекте ioni c, где мое требование состоит в том, чтобы получить данные json бэкэнда через вызов API и отобразить содержимое json в виде раскрывающегося списка во внешней части. ниже приведен код вызова API, формат json и код, который я пробовал.

вызов API брокера

http://example.com/broker/get-user-names

бэкэнд Json данные:

{
    "USER_NAME": "John",
    "USER_COUNTRY": "USA"
},


{
    "USER_NAME": "Smith",
    "USER_COUNTRY": "Canada"
},


 {
    "USER_NAME": "Peter",
    "USER_COUNTRY": "Russia"
},

I хотел создать выпадающий список, где я хочу получить все имена пользователей в dropdwon для выбора, я создал метод в файлах .ts, ниже метода

 getUserNames() {
this.apiService.getUserNames(this.apiService.loggedInUser.value.id).then(
  res => {
     this.userNames= res;
     alert(JSON.stringify(this.userNames));

  },
  err => {
    alert(JSON.stringify(err))
  }
)
}

In. html file

  <ion-select placeholder="Select One">

          <ion-select-option selected="true" >{{userNames.USER_NAME}}-</ion-select-option>

 </ion-select>

Но он отображает только первое имя пользователя, т. Е. JOHN, в моем случае, поскольку json данные содержат john в качестве первого имени пользователя.

Как я могу отобразить все имена пользователей в виде выпадающих списков из бэкэнда json data.

, пожалуйста, помогите мне в этом, я был поражен этим за последнюю 1 неделю.

спасибо

Answer 1

При условии this.userNames - это массив, используйте:

<ion-select-option *ngFor="let user of userNames">{{user.USER_NAME}}-</ion-select-option>

.ts

Создайте массив для хранения данных, которые вы получаете от API

userNames = [];

сейчас в блоке подписки:

getUserNames() {
   this.apiService.getUserNames(this.apiService.loggedInUser.value.id)
     .subscribe(res => {
        this.userNames= res;
        alert(JSON.stringify(this.userNames)); 
     },
     err => {
       alert(JSON.stringify(err))
     }
   )
}