在Ionic项目中获取并显示后台json数据作为下拉列表

Question

Iam在一个离子项目中工作，我的要求是通过api调用获取后端json数据，并在前端以下拉菜单的形式显示json内容。下面是我尝试过的api调用代码、json格式和代码。

Broker 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"
},

我想创建一个下拉列表，在那里我想获得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))
}
)
}

在.html文件中

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

但它只显示第一个用户名，在我的例子中是JOHN作为json数据，其中包含JOHN作为第一个用户名。

我该如何从后端json数据中将所有用户名显示为下拉列表。

请帮帮我，我上个星期就被这件事打动了。

感谢

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))
}
)
}