如何从 ionic 4 中的 API 获取 return 对象值

Question

我正在使用离子 4。我 post 数据到我的 API 然后我得到 return 这样的结果：

{
    "responses": [
        {
            "Detection": {
                "Entities": [
                    {"entityId":"1","score":1.05855},
                    {"entityId":"2","score":10.05}
                ],
                "Images": [
                    {"url":"https:URL"}, 
                    {"url":"https:URL"}
                ],
                "Ages": [
                    {"age":"33"}, 
                    {"age":"17"}
                ],
                "Labels":[
                    {"label":"game"}
                ]
            }
        }
    ]
}

我的问题是如何从我的 API 中获取特定数据，就像我想将其分开以获取实体、图像、年龄和标签一样。像这样 this.entities = entitiesID;

this.score = 得分；

这是我的代码：

通过使用 QuickType，我复制了您的 API 响应并生成了一些接口以获取类型信息：

random_interface.ts

export interface RandomAPI {
    responses: Response;
}

export interface Response {
    Detection: Detection;
}

export interface Detection {
    Entities: Entity[];
    Images:   Image[];
    Ages:     Age[];
    Labels:   Label[];
}

export interface Age {
    age: string;
}

export interface Entity {
    entityId: string;
    score:    number;
}

export interface Image {
    url: string;
}

export interface Label {
    label: string;
}

这里是主要代码:

onSubmit() {
this.http.post(this._apiURL).subscribe((data: RandomAPI) => {
  this.theTodo = data ;
  this.entities = this.theTodo.responses.Detection.Entities 
  console.log(this.entities);
});

}

谁能帮帮我？

Answer 1

通过使用 QuickType，我复制了您的 API 响应并生成了一些接口以获取类型信息：

random_interface.ts

export interface RandomAPI {
    responses: Response[];
}

export interface Response {
    Detection: Detection;
}

export interface Detection {
    Entities: Entity[];
    Images:   Image[];
    Ages:     Age[];
    Labels:   Label[];
}

export interface Age {
    age: string;
}

export interface Entity {
    entityId: string;
    score:    number;
}

export interface Image {
    url: string;
}

export interface Label {
    label: string;
}

现在您需要使用 HttpClient 模块加载 http class（假设您使用的是 Angular）并使用 get方法。

主要代码

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { RandomAPI } from "./random_interface.ts";

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage implements OnInit {
  public theTodo: RandomAPI;
  private _apiURL = 'the_url_of_your_api';

  constructor(
    private http: HttpClient
  ) { }


  ngOnInit() {
    this.http.get(this._apiURL).subscribe((data: RandomAPI) => {
      this.theTodo = data ;
    });
  }
}

现在 theTodo 对象拥有您的所有 API 数据，您可以随意访问它。

// Array of entities data
this.entities = this.theTodo.responses.Detection.Entities 
console.log(this.entities) // Like as [{"entityId":"1","score":1.05855}]

更多信息：ionic 4 get native data

更新：最后一步我弄错了，应该是：

// Array of entities data
this.entities = this.theTodo.responses[0].Detection.Entities 
console.log(this.entities) // Like as [{"entityId":"1","score":1.05855}]

如何从 ionic 4 中的 API 获取 return 对象值

How to get return object value from API in ionic 4

typescript

ionic4