我如何使用Angular 8从返回JSON对象的API中检索数据

唐尼穿的

导入HttpClientModule并将其注册到app模块中已完成。但是,当我从API发出请求时,控制台出现错误:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

以下是我的app.service.ts

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http'
import {mydata} from './app'
import { Observable } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class AppService {


  private url:string="https://allsportsapi.com/api/football/?&met=Videos&eventId=76387&APIkey=e09665167a2ccf5f2c7d15527c78d5d209eff826dea5b4dd0bdbc65b258be8de";


  constructor(private http : HttpClient) { }

  getData():Observable<mydata[]>
  {
    return this.http.get<mydata[]>(this.url);
  }


}
**Below is the code for the app.component.ts**
import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})





export class AppComponent  implements OnInit{
  title = 'movie';
  info:any[];
  constructor(private service:AppService){}
  ngOnInit()
  {
      this.service.getData().subscribe(data=>{this.info = data})
  }
}
**Below is the app.component.html**

<h1>Welcome To {{title}} stream</h1>
<table>
  <td *ngFor="let video of info ">

    <tr>{{video.result[0] | json}}</tr>
    <tr>{{video.result[1] | json}}</tr>
  </td>
</table>

**This is my interface**
export interface mydata
{
  success:number,
  result:string[]
}
**This is what the api returns**
{
  "success": 1,
  "result": [
    {
      "video_title": "Goal - 1:0 - 12'\n Poli A., Bologna",
      "video_url": "https://cc.sporttube.com/embed/leMCCCG/no-preload"
    },
    {
      "video_title": "Goal - 1:1 - 38'\n Babacar K., Sassuolo",
      "video_url": "https://cc.sporttube.com/embed/TeMCCCG/no-preload"
    },
    {
      "video_title": "Yellow Card - 86'\n Goldaniga E., Sassuolo",
      "video_url": "https://cc.sporttube.com/embed/EeMCCCG/no-preload"
    },
    {
      "video_title": "Goal - 2:1 - 88'\n Pulgar E., Bologna",
      "video_url": "https://cc.sporttube.com/embed/FeMCCCG/no-preload"
    },
    {
      "video_title": "Highlights",
      "video_url": "https://streamable.com/e/0d35p"
    }
  ]
}

特里

我建议您创建一个与您的API JSON响应匹配的.TS接口。

然后更新您的方法,this.service.getData()以便它接收以前创建的.TS接口的数组。

最后,更新info:any[];info:YourInterface[];

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何从java中的json对象检索数据?

来自分类Dev

通过 Angular 服务使用 JSON 中的 API - 如何过滤它返回的数据?

来自分类Dev

我如何使用 json 函数返回对象

来自分类Dev

无法从我的JSON文件检索数据对象

来自分类Dev

如何从API调用返回的JSON对象访问数据?

来自分类Dev

从表单搜索中检索数据。使用基于JSON的API URL检索数据

来自分类Dev

PHP如何从返回的对象中检索值

来自分类Dev

PHP如何从返回的对象中检索值

来自分类Dev

使用xpath从json对象快速检索数据

来自分类Dev

如何从我使用 angular6 的 api 访问 JSON 数据响应

来自分类Dev

如何从JSON数组中检索JSON对象

来自分类Dev

使用Object.entries检索从JSON对象(API调用)检索的Typescript react app中如何正确键入空值?

来自分类Dev

如何使用 Angular 8 在我的项目中预览静态文件?

来自分类Dev

如何在angular js中访问freemarker对象,或者我可以使用angular代替Freemarker

来自分类Dev

在我的 Wordpress 插件中,如何使用设置 API 保存和检索多个索引数据集?

来自分类Dev

如何使用Android从Nest API检索Json对象

来自分类Dev

如何在我的Flask API中返回一个通用的JSON对象?

来自分类Dev

如何在我的对象(Redux、React)中获取数据(我的 api json)?

来自分类Dev

如何在Android中检索JSON对象

来自分类Dev

如何从 JSON 对象中检索多个值

来自分类Dev

如何在Angular 5中使用jaxb和rest api正确检索数据?

来自分类Dev

使用 volley 在 android 中检索 Json 对象

来自分类Dev

如何使用angular js检索数据以及在MYSQL coloumn中存储的json格式

来自分类Dev

如何根据嵌套 json 对象中的某个键的值从 firebase 检索数据

来自分类Dev

如何仅从制表器中检索更新的行数据作为 JSON 对象?

来自分类Dev

针对使用react-native中的fetch检索的json对象验证数据

来自分类Dev

我如何使用angular js在另一个HTML文件中使用从json响应中获取的数据

来自分类Dev

使用 Django REST 返回从 Slack 检索的 JSON 对象

来自分类Dev

如何从PHP文件中检索JSON数据?

Related 相关文章

  1. 1

    如何从java中的json对象检索数据?

  2. 2

    通过 Angular 服务使用 JSON 中的 API - 如何过滤它返回的数据?

  3. 3

    我如何使用 json 函数返回对象

  4. 4

    无法从我的JSON文件检索数据对象

  5. 5

    如何从API调用返回的JSON对象访问数据?

  6. 6

    从表单搜索中检索数据。使用基于JSON的API URL检索数据

  7. 7

    PHP如何从返回的对象中检索值

  8. 8

    PHP如何从返回的对象中检索值

  9. 9

    使用xpath从json对象快速检索数据

  10. 10

    如何从我使用 angular6 的 api 访问 JSON 数据响应

  11. 11

    如何从JSON数组中检索JSON对象

  12. 12

    使用Object.entries检索从JSON对象(API调用)检索的Typescript react app中如何正确键入空值?

  13. 13

    如何使用 Angular 8 在我的项目中预览静态文件?

  14. 14

    如何在angular js中访问freemarker对象,或者我可以使用angular代替Freemarker

  15. 15

    在我的 Wordpress 插件中,如何使用设置 API 保存和检索多个索引数据集?

  16. 16

    如何使用Android从Nest API检索Json对象

  17. 17

    如何在我的Flask API中返回一个通用的JSON对象?

  18. 18

    如何在我的对象(Redux、React)中获取数据(我的 api json)?

  19. 19

    如何在Android中检索JSON对象

  20. 20

    如何从 JSON 对象中检索多个值

  21. 21

    如何在Angular 5中使用jaxb和rest api正确检索数据?

  22. 22

    使用 volley 在 android 中检索 Json 对象

  23. 23

    如何使用angular js检索数据以及在MYSQL coloumn中存储的json格式

  24. 24

    如何根据嵌套 json 对象中的某个键的值从 firebase 检索数据

  25. 25

    如何仅从制表器中检索更新的行数据作为 JSON 对象?

  26. 26

    针对使用react-native中的fetch检索的json对象验证数据

  27. 27

    我如何使用angular js在另一个HTML文件中使用从json响应中获取的数据

  28. 28

    使用 Django REST 返回从 Slack 检索的 JSON 对象

  29. 29

    如何从PHP文件中检索JSON数据?

热门标签

归档