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

Posted 2023-03-13

【中文标题】在 Ionic 项目中获取并显示后端 json 数据作为下拉列表

【英文标题】：fetching and displaying the backend json data as dropdown in an Ionic project

【发布时间】：2020-06-23 02:32:15

【问题描述】：

我在一个 ionic 项目中工作，我的要求是通过 api 调用获取后端 json 数据并将 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"
,

我想创建一个下拉列表，我想在其中获取 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 数据的下拉列表。

请帮我解决这个问题，我从上 1 周开始就受到了打击。

谢谢

【问题讨论】：

this.userNames 是一个数组吗？

【参考方案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))
     
   )

【讨论】：

嗨@Nicholas，感谢您的回复。但我还没有在那里创建任何数组。请帮助我如何在这里获得输出

.ts 文件中的this.userNames 是什么？

userNames 是我创建并在那里写入 json 格式的模型名称。我是离子和角度的新手。我通过在线搜索做到了这一点。请帮帮我

将其定义为userNames = [] 作为打字稿文件中的一个字段。

嗨@Nicholas，不。我不明白如何继续，因为我正在从后端代理检索数据。我如何将后端 json 数据存储在数组中。数据可能会发生变化，并将在未来得到更新。对此的任何帮助将不胜感激。谢谢