Angular 5，来自 API 的 JSON 数组

Posted 2023-03-13

【中文标题】Angular 5，来自 API 的 JSON 数组

【英文标题】：Angular 5, JSON Array from API

【发布时间】：2018-07-04 04:48:40

【问题描述】：

我正在尝试从 API 加载数组并使用 Angular 5 将其显示在表格中。

我的代码听起来很简单：

import  HttpClient  from '@angular/common/http';

export class CryptreviewComponent implements OnInit 

  public results:Review[] = [];

  constructor(private http: HttpClient)  

  ngOnInit() 
    this.http.get('http:...url..').subscribe(data => 
        console.log(typeof data);
        console.log(typeof this.results);
        this.results = data as Review[];
        console.log(typeof this.results);
        console.log(this.results);
    ,
    err => 
        console.log(err);
       );
  


interface Review
    coin_id:string;
    user_id:number;
    name:string;
    reach_remark:string;
    reach_score:number;
    security_remark:string;
    security_score:number;
    dev_remark:string;
    dev_score:number;
    transparency_remark:string;
    transparency_score:number;
    fungibility_remark:string;
    fungibility_score:number;
    coin_distribution_remark:string;
    coin_distribution_score:number;
    privacy_remark:string;
    pricavy_score:number;
    hardened_remark:string;
    hardened_score:number;
    features_remark:string;
    features_score:number;
    remarks:string;
    links:string;
    published:number;
    verification_status:number;

观点：

<table>
    <tr *ngFor="let review of results"> 
        <td>
        review.coin_id
        </td>
    </tr>
</table>

这是我得到的结果：

字符串->console.log(数据类型);

对象->console.log(typeofthis.results);

字符串->console.log(typeof this.results);

["coin_id":"BTC","user_id":13,"name":"","re​​ach_remark":"","re​​ach_score":100,"security_remark":"","security_score": 93,"dev_remark":"","dev_score":70,"transparency_remark":"","transparency_score":81,"fungibility_remark":"","fungibility_score":30,"coin_distribution_remark":"","coin_distribution_score ":66,"privacy_remark":"","privacy_score":71,"hardened_remark":"","hardened_score":100,"features_remark":"","features_score":34,"remarks":"", "links":"","published":0,"verification_status":0]

-> console.log(this.results);

ERROR 错误：尝试比较 '["coin_id":"BT...' 时出错。只有数组 并且允许迭代

我得到的结果似乎是有效的 JSON，但它只是不想成为一个数组。

到目前为止我已经尝试过：JSON.parse(data), data.json()

【参考方案1】：

由于您使用的是 HttpClient，因此 response.json() 已经隐含。

你不应该像这样投射响应，你的服务应该返回一个可观察的评论数组，然后你会得到数据。

服务：

 getReview():Observable<Review[]>
     return this._http.get(this.getReviewURL)
     .catch( this.handleError );//not needed but you may want this too.
 

private handleError( error: any ) 
    if ( error instanceof Response ) //Backend Error
        //.json() parsing failed from server
        console.log( "Error:"+error.text() );
        return Observable.throw( error.text() );
    
    //otherwise the server returned error code status
    return Observable.throw( error );

ngInit：

  this.dataService.getReview().subscribe(data=>
      this.results=data;
  ),
  error=>
      console.log( "ERROR:" + error );
  

请注意，如果后端实际上返回的是单个对象而不是 1 个对象的数组，那么这将不起作用。如果是这种情况，您不能/不应该让服务器都返回 Review 数组在某些情况下，同一调用中的单个 Review 对象...

【讨论】：

现在测试了，数据仍然是一个字符串，我仍然得到“只允许数组和迭代”错误 -.-

这是 API 的问题，它没有返回正确的 JSON，感谢您的帮助，我的代码现在看起来更好了，谢谢。

谢谢。我已经搞砸了好几天，但无法弄清楚 - 感谢您的回答，它终于奏效了！