Javascript 角度-如何获得JSON对象的结果？

我正在尝试使用新的公共API V2 CoinMarketCap，但在这方面我遇到了一些困难

JSON:

我的硬币模型：

export class Coins {
    id: string;
    name: string;
    symbol: string;
    rank: number;
    price_usd: number;
    price_btc: number;
    _24h_volume_usd: number;
    market_cap_usd: number;
    available_supply: number;
    total_supply: number;
    percent_change_1h: number;
    percent_change_24h: number;
    percent_change_7d: number;
    last_updated: number;
}

我的服务：

urlBase = 'https://api.coinmarketcap.com/v2/ticker/?limit=10';
getCoins() {
   return Observable
   .timer(0, 5000)
   .flatMap(() =>  this.http.get(this.urlBase))
   .pipe(
      map(res => res), 
      catchError(this.handleError)
    )
}

我的组成部分：

coins: Coins[];
getCoins() {
  this.coinsService.getCoins().subscribe(
    data => {
      this.coins = data;
    });
}

getCoins() {
    this.appService
      .getCoins()
      .subscribe(
        data => this.coins = data.data,
        error => console.log(error)
      );
  }

  coinKeys(coins) {
    return Object.keys(coins);
}

我的html：

<div class="card card-inverse" *ngFor="let coin of coins">

有什么建议吗

---

谢谢

您之所以出现此错误，只是因为您正在迭代一个对象。您需要迭代对象数组

在mycomponent文件中尝试以下代码

getCoins() {
this.coinsService.getCoins().subscribe(
    data => {
        let coins = [];
        for (let key in data) {
            coins.push(data['key']);
        }
      this.coins = coins;
    });
}

---

只有在迭代对象时才会出现此错误。您需要迭代对象数组

在mycomponent文件中尝试以下代码

getCoins() {
this.coinsService.getCoins().subscribe(
    data => {
        let coins = [];
        for (let key in data) {
            coins.push(data['key']);
        }
      this.coins = coins;
    });
}

---

从您显示的api数据中，我看到您正在使用对象而不是数组分配

this.coins

。您应该首先将其转换为数组，然后将其分配给

this.coins

getCoins() {
  this.coinsService.getCoins().subscribe(
    data => {
      this.coins = [];
      for(let key in data){
          this.coins.push(data[key]);
       }
    });
}

或者也可以通过这种方式将对象转换为数组

getCoins() {
      this.coinsService.getCoins().subscribe(
        data => {
          this.coins = [];
          Object.keys(data).map((key)=>{ this.coins.push(data[key]) });
        });
}

在您的服务文件中

getCoins() {
    return this.http.get(this.urlBase).pipe(map(res => res = res.json()['data']))
}

---

根据您显示的api数据，我看到您正在使用对象而不是数组分配

this.coins
。您应该首先将其转换为数组，然后将其分配给
this.coins

getCoins() {
  this.coinsService.getCoins().subscribe(
    data => {
      this.coins = [];
      for(let key in data){
          this.coins.push(data[key]);
       }
    });
}

或者也可以通过这种方式将对象转换为数组

getCoins() {
      this.coinsService.getCoins().subscribe(
        data => {
          this.coins = [];
          Object.keys(data).map((key)=>{ this.coins.push(data[key]) });
        });
}

在您的服务文件中

getCoins() {
    return this.http.get(this.urlBase).pipe(map(res => res = res.json()['data']))
}

工作
this.coins=data.json（）
或者您可以使用observable

在html中


组件中

coins: Observable<Coin[]>;

硬币：可见；

getCoins（）{
this.coins=this.coinsService.getCoins（）；
}
this.coins=data.json（）
或者您可以使用observable

在html中


组件中

coins: Observable<Coin[]>;

硬币：可见；

getCoins（）{
this.coins=this.coinsService.getCoins（）；
}
在用：

getCoins(): Observable<any> {
  const api = 'https://api.coinmarketcap.com/v2/ticker/?limit=10';
  return this.httpClient.get(api);    
}

在模板中：

<tr *ngFor="let k of coinKeys(coins )">
    <td>{{ coins[k].id }}</td>
</tr>


{{coins[k].id}
在用：

getCoins(): Observable<any> {
  const api = 'https://api.coinmarketcap.com/v2/ticker/?limit=10';
  return this.httpClient.get(api);    
}

在模板中：

<tr *ngFor="let k of coinKeys(coins )">
    <td>{{ coins[k].id }}</td>
</tr>


{{coins[k].id}
好的，我试过你的例子，发现有些问题。我不确定你想用定时器实现什么，所以我会保持简单。我得到的响应是：
{data:[]，metadata:[]}

因此，我假设在您的映射中，您需要像这样映射
map（res=>res.data）
以显示数据属性

我重写了一个简单的例子：

  getCoins() {
    const urlBase = "https://api.coinmarketcap.com/v2/ticker/?limit=10";
    this.http
      .get(urlBase)
      .pipe(map(res => res))
      .subscribe(res => console.log(res));
  }

要获取数据属性，请将上面的映射更改为
.pipe（映射（res=>res.data））

为避免ts错误，您还可以键入：
.pipe（映射（（res:{data:any；metadata:any}）=>res.data））

您还需要一些传统的数据映射来匹配您的硬币界面

如果你找不到方法，我可以帮你更多；）
 好的，我试过你的例子，我发现有些问题。我不确定你想用定时器实现什么，所以我会保持简单。我得到的响应是：
{data:[]，metadata:[]}

因此，我假设在您的映射中，您需要像这样映射
map（res=>res.data）
以显示数据属性

我重写了一个简单的例子：

  getCoins() {
    const urlBase = "https://api.coinmarketcap.com/v2/ticker/?limit=10";
    this.http
      .get(urlBase)
      .pipe(map(res => res))
      .subscribe(res => console.log(res));
  }

要获取数据属性，请将上面的映射更改为
.pipe（映射（res=>res.data））

为避免ts错误，您还可以键入：
.pipe（映射（（res:{data:any；metadata:any}）=>res.data））

您还需要一些传统的数据映射来匹配您的硬币界面

如果你找不到方法，我可以帮你更多；）
 您能给出
硬币的定义吗
请使用*ngFor=“让硬币进入硬币”。这有帮助吗？您能否显示
Coin
pleaseTry的定义以使用*ngFor=“let Coin in coins in coins”。这是否有帮助？可能是Hi Amit的副本，谢谢您的回复。在这两种情况下，我都有输出：错误类型错误：无法读取未定义的属性“推送”将您的硬币初始化为
coins:coins[]=[]。@Michael如果不使用空数组初始化
硬币
数组
[]
，则必须使用临时数组，然后分配它。如果不是在声明期间，最好是在函数本身内部初始化。好的，我没有错误，但屏幕上没有返回任何内容。它应该如何在html？是的，它为我工作！！相反，res=res.json（）仅res=resHi-Amit，感谢您的回复。在这两种情况下，我都有输出：错误类型错误：无法读取未定义的属性“推送”将您的硬币初始化为
coins:coins[]=[]。@Michael如果不使用空数组初始化
硬币
数组
[]
，则必须使用临时数组，然后分配它。如果不是在声明期间，最好是在函数本身内部初始化。好的，我没有错误，但屏幕上没有返回任何内容。它应该如何在html？是的，它为我工作！！相反，res=res.json（）仅res=resHi Megaklis，感谢您的回复。我有以下错误：src/app/service/coins.service.ts（34,22）中有错误：错误TS2339:类型“Object”上不存在属性“data”。这是因为您尚未键入数据对象。试试这个：
.pipe（map（（res:{data:any；metadata:any}）=>res.data））
any应该换成更稳定的东西。错误TS2339:类型“void”上不存在属性“subscribe”。屏幕截图或代码片段如何？嗨，Megaklis，谢谢你的回复。我有以下错误：src/app/service/coins.service.ts（34,22）中有错误：错误TS2339:类型“Object”上不存在属性“data”。这是因为您尚未键入数据对象。尝试以下操作：
.pipe（map（（res:{data:any；metadata:any}）=>res.data））
any应该被替换为更稳定的内容。错误TS2339:属性“subscribe”在类型“void”上不存在。屏幕截图或代码段如何？