Angular 2 http - get data from API

Question

I'm trying to get data in JSON format from this site https://api.chucknorris.io/ (random joke), but i get an error:ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. And "DebugContext_ {view: Object, nodeIndex: 11, nodeDef: Object, elDef: Object, elView: Object}"

This is routing.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class RandomService {
    constructor(private http: Http) {
        console.log('working');

    }
    getRandomJokes() {
        return this.http.get('https://api.chucknorris.io/jokes/random')
            .map(res => res.json());
    }
}

This is the component i'm trying to get data into

<div *ngFor="let joke of jokes">
<h3>{{joke.value}}</h3>
</div>

`,
providers: [RandomService]

})
export class PocetnaComponent  { 
jokes: Joke[];

constructor(private jokesService: RandomService){
this.jokesService.getRandomJokes().subscribe(jokes => {this.jokes = jokes});
}

}
interface Joke{
 id: number;
 value: string;
}

getRandomJokes() is not returning an array so jokes on you.. — eko
– eko, Commented May 25, 2017 at 12:31

AVJT82 · Accepted Answer · 2017-05-25 15:26:08Z

1

Since what you are receiving is not an array, but an object, therefore the error you are getting is because an object cannot be iterated. You might want to rethink the naming, since we are dealing with just one object, joke would be a more suitable name. But here, let's use jokes.

So you should do is remove the *ngFor completely and simply display the value with:

{{jokes?.value}}

Nothing else is needed :) Notice the safe navigation operator here, which safeguards null and undefined values in property paths. Be prepared to use this a lot in the asynchronous world ;)

Here is more info about the safe navigation operator, from the official docs.

answered May 25, 2017 at 15:26

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

Comments

Chrillewoodz · Accepted Answer · 2017-05-25 12:54:50Z

0

You are not binding an array to the *ngFor, you have to make sure that jokes is actually an array and not a random joke object.

To solve it if it is an object you can just do this.jokes = [jokes].

edited May 25, 2017 at 12:54

answered May 25, 2017 at 12:31

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

3 Comments

AVJT82 Over a year ago

This is a fine solution, but why even set jokes in array? Why not just remove the *ngFor and just show the properties of the object?

Chrillewoodz Over a year ago

@AJT_82 That's what I would do but it's not the question. Therefore it's not the answer :)

AVJT82 Over a year ago

Well, in my opinion nowhere is mentioned that it needs to be an array. I think we should always guide to "a better way" if there is one. Think if the code would be more complicated and more costly and you know there is a better/faster/easier (etc) way, why not then suggest that? :) I would, and I do if I'm smart enough to figure out a better solution (rarely happens :P ).

Ovidiu Dolha · Accepted Answer · 2017-05-25 12:35:25Z

0

The url you mention only provides a single value in an object, so you cannot iterate over it.

Maybe make multiple calls like this:

getRandomJokes(n = 10){
    return Promise.all(Array(n).fill(0)
            .map(() => this.http.get('https://api.chucknorris.io/jokes/random').toPromise()
                                .then(res => res.json()));
}

and use with promise

this.jokesService.getRandomJokes().then(jokes => {this.jokes = jokes});

answered May 25, 2017 at 12:35

Ovidiu Dolha

5,4132 gold badges24 silver badges31 bronze badges

Comments

Rahul Singh · Accepted Answer · 2017-05-25 12:37:36Z

0

you can check if it is an array and then go for ngFor or convert the jokes to array like let jokes = [jokes];

<div *ngIf = "jokes.length > 0" ; else check>
    <div *ngFor="let joke of jokes">
        <h3>{{joke.value}}</h3>
    </div>
</div>
<ng-template #check>
    <p>print the value of the object </p>
</ng-template>

answered May 25, 2017 at 12:37

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

Comments

sivy · Accepted Answer · 2017-05-25 13:48:44Z

0

May be jokes isn't an array.

 <div *ngIf="Array.isArray(jokes)>
<div *ngFor="let joke of jokes"> 
<h3>{{joke.value}}</h3> 
</div>

answered May 25, 2017 at 13:48

sivy

4814 silver badges10 bronze badges

Collectives™ on Stack Overflow

Angular 2 http - get data from API

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related