Angular2 HTTP request fails

Question

This is my first question here. I have a problem with the http requests on an API. When I make the request, the following error shows up on the console:

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

The content of each files is:

boot.ts

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from "./app.component";
import {HTTP_PROVIDERS} from "angular2/http";

bootstrap(AppComponent,[HTTP_PROVIDERS]);

app.component.ts

import {Component} from 'angular2/core';
import {HTTPTestService} from "./services/peli.service";
import {Peli} from "./peli";

@Component({
    selector: 'my-app',
    template: `
        <h1>Búsqueda de película</h1>
        <input #titulo placeholder="Buscar...">
        <button class="btn btn-success"     (click)="infoPeli(titulo.value)">Buscar</button>
        <div *ngFor="#peli of pelis">
        <h1>{{peli.Title}}</h1>
        <p>{{peli.Year}}</p>
        </div>
    `,
    providers: [HTTPTestService]
})

export class AppComponent {

pelis:Peli[];

    constructor (private _httpService: HTTPTestService) {}

    infoPeli(nombre:string) {
        this._httpService.buscarPeli(nombre)
            .subscribe(
                data => this.pelis = data,
                error => alert(error),
                () => console.log(this.pelis)
            );
    }
}

peli.service.ts

import {Injectable} from "angular2/core";
import {Http} from "angular2/http";
import 'rxjs/add/operator/map';

@Injectable()
export class HTTPTestService {
    constructor(private _http:Http) {
    }

    buscarPeli(nombre:string) {
        return this._http.get('http://www.omdbapi.com/?    t='+nombre+'&y=&plot=short&r=json').map(res => res.json());
    }
}

peli.ts

export class Peli{
    Title:string;
    Year:string;
}

And the JSON file that I receive from the request (Input - spiderman):

{"Title":"Spiderman","Year":"1990","Rated":"N/A","Released":"N/A","Runtime":"5 min","Genre":"Short","Director":"Christian Davi","Writer":"N/A","Actors":"N/A","Plot":"N/A","Language":"German","Country":"Switzerland","Awards":"N/A","Poster":"N/A","Metascore":"N/A","imdbRating":"5.7","imdbVotes":"90","imdbID":"tt0100669","Type":"movie","Response":"True"}

I don't know where the problem is, everything seems to be OK...

Thanks in advance!!

eko · Accepted Answer · 2016-05-11 19:22:37Z

1

You have an <div *ngFor="#peli of pelis"> element. And you are setting this.pelis to be an object here =>

.subscribe(
                data => this.pelis = data,

And you are getting an

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

Since pelis is not an array you are getting this error.

For example: Instead of

data => this.pelis = data

Try:

data => this.pelis = [data]

edited May 11, 2016 at 19:22

answered May 11, 2016 at 18:30

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

6 Comments

Thierry Henry Over a year ago

I'm new on Angular and I don't know how to solve that. Could you help me to fix it please? It's just a test to practice.

Thierry Henry Over a year ago

Thanks! I alter the code in that way: infoPeli(nombre:string) { this._httpService.buscarPeli(nombre) .subscribe( (data)=>{this.pelis = [data.Title, data.Year]}, error => alert(error), () => console.log(this.pelis) ); }With that fix the following error appers in the compiler: Assigned expression type string[] is not assignable to type Peli[]

Thierry Henry Over a year ago

Ok! I got the same error in the compiler, but the object appears on the console: ["Spiderman", "1990"] Now the problem is that the data is not shown on the screen.

Thierry Henry Over a year ago

With the last fix, the object that appears on the console is: [Object {data=Object}]

Thierry Henry Over a year ago

At last it works! With the solution data => this.pelis = [data], everything goes OK! Thank you very much!

|

Collectives™ on Stack Overflow

Angular2 HTTP request fails

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related