Angular 5, JSON Array from API

Question

I am trying to load an array from an API and display it in a table with Angular 5.

Sounds simple heres my code:

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;
}

The view:

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

This is the result I get:

string -> console.log(typeof data);

object -> console.log(typeofthis.results);

string -> console.log(typeof this.results);

[{"coin_id":"BTC","user_id":13,"name":"","reach_remark":"","reach_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 Error: Error trying to diff '[{"coin_id":"BT...'. Only arrays and iterables are allowed

The result I get seems to be valid JSON but it just does not want to become an array.

So far I have tried: JSON.parse(data), data.json()

Asura · Accepted Answer · 2018-01-25 02:09:13Z

4

Since you are using HttpClient, the response.json() is already implied.

You should not be casting the response like this, your service should return an observable of Array of Review and then you get the data.

service:

 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 );
  }

it is to note that if the backend is actually returning a single object and not an array of 1 object that this will not work.If that is the case, you cannot/should not have both the server returning an array of Review in some case and a single Review object in another for the same call...

edited Jan 25, 2018 at 2:09

answered Jan 25, 2018 at 2:03

Asura

8696 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

eljoe Over a year ago

Tested it out now, data is still a string and I still get the "Only arrays and iterables are allowed" Error -.-

eljoe Over a year ago

It was a problem with the API, it did not return proper JSON, thanks to your help my code looks better now thanks.

Daniel Steiner Over a year ago

Thanks. I was messing around with that for days now and couldn't figure it out - thanks to your answer it finally works!

Collectives™ on Stack Overflow

Angular 5, JSON Array from API

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related