从API而不是Json文件访问数据

我试图从API端点而不是Json文件访问数据，但在访问数据时遇到问题。数据被很好地拉入我在angular项目中使用的ng multiselect下拉函数中，但当我尝试改用API时就没有了

我花了大量的时间在谷歌和这个网站上搜索答案，结果都很短，这就是我为什么在这里发帖的原因

我使用的Json文件似乎与API输出的Json文件具有不同的结构。这就是我无法使用相同查询访问该数据的原因吗？API回复在顶部和底部包含一些额外的代码。我已经从下面两个地方添加了一个结构片段

Json文件：

[
  {
    "id": 1,
    "name": "John"
  },
  {
    "id": 2,
    "name": "Jane"
  }
]

{
  "data": [
  {
    "id": 1,
    "name": "John"
  },
  {
    "id": 2,
    "name": "Jane"
  }
]

API回复：

[
  {
    "id": 1,
    "name": "John"
  },
  {
    "id": 2,
    "name": "Jane"
  }
]

{
  "data": [
  {
    "id": 1,
    "name": "John"
  },
  {
    "id": 2,
    "name": "Jane"
  }
]

如果有人对这两种Json格式是问题所在还是其他问题有任何意见，请务必告诉我。：）

编辑：添加了app.component.html、app.component.ts和service.ts

  getCustomerDropdown() {
    const tmp = [];
    this.reportS.getCustomers().subscribe( customer => {
      for (let i = 0; i < customer.length; i++) {
        tmp.push(
          {
            id: i,
            name: customer[i].data.name
          }
        );
      }
      this.dropdownList = tmp;
    });
  }

getCustomers() {
    const httpOptions = this.getHttpOptions();
    return this.http.get<GetApiReply>(
      `${this.bks.getServerAddress()}customers`,
      httpOptions
    );
  }

app.component.html

<ng-multiselect-dropdown
  name="Customers"
  [placeholder]="'Select Customer'"
  [data]="dropdownList"
  [(ngModel)]="selectedItems"
  [settings]="dropdownSettings"
  (onSelect)="onItemSelect($event)"
>
</ng-multiselect-dropdown>

应用程序组件.ts

  getCustomerDropdown() {
    const tmp = [];
    this.reportS.getCustomers().subscribe( customer => {
      for (let i = 0; i < customer.length; i++) {
        tmp.push(
          {
            id: i,
            name: customer[i].data.name
          }
        );
      }
      this.dropdownList = tmp;
    });
  }

getCustomers() {
    const httpOptions = this.getHttpOptions();
    return this.http.get<GetApiReply>(
      `${this.bks.getServerAddress()}customers`,
      httpOptions
    );
  }

getCustomerDropdown（）{
常数tmp=[]；
this.reportS.getCustomers（）.subscribe（客户=>{
for（设i=0；i

服务.ts

  getCustomerDropdown() {
    const tmp = [];
    this.reportS.getCustomers().subscribe( customer => {
      for (let i = 0; i < customer.length; i++) {
        tmp.push(
          {
            id: i,
            name: customer[i].data.name
          }
        );
      }
      this.dropdownList = tmp;
    });
  }

getCustomers() {
    const httpOptions = this.getHttpOptions();
    return this.http.get<GetApiReply>(
      `${this.bks.getServerAddress()}customers`,
      httpOptions
    );
  }

getCustomers（）{
const httpOptions=this.getHttpOptions（）；
返回this.http.get(
`${this.bks.getServerAddress（）}客户`，
httpOptions
);
}

我希望您的服务方法使api调用看起来像这样：

getData(): Observable<Option[]> {
  return this.http.get('some url').pipe(pluck('data'));
}

---

您使用的是响应的数据属性吗？

因为很可能是格式。不同的格式需要不同的数据访问方式。当然，你想添加组件控制器和模板吗？我已经在那里添加了代码。嗨，你能仔细阅读我的编辑，看看这是否澄清了我的方法吗？谢谢，这是因为您没有从响应的“data”属性获取数据。尝试将我的答案的

.pipe（pull（'data'））

部分链接到.get（）调用的末尾。我们确实需要看看

getapirey

看起来是什么样子才能弄清楚。因为要么它有一个嵌套的“数据”属性，您需要在组件中使用它，要么它是一个{id，name}对象数组。如果是后者，那么您需要在http调用后在管道中进行处理。太好了，完成了！非常感谢你！我在其中一行中得到一个错误，指出“类型{}上不存在属性'length'。去掉它会导致更多错误，所以忽略它是否安全？GetApiReply只是API请求中的一个模型。这是它的内容导出类getapipreply{data:any；message:string；success:boolean；metadata:any；length:number；}```