Angular 2 getting json data from api to array

Question

I need to fetch JSON data to the array, and with the press of a button to create a new list. Any solutions?

import { Component } from '@angular/core';
import { RandomService } from '../services/random.service';

@Component({
selector: 'pocetna',
template: `
<ul>
<li *ngFor="let joke of jokes">{{joke.value}}</li>
</ul>
<button (click)="getJoke()">more jokes</button>`,

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

constructor(private jokesService: RandomService){}

ngOnInit() {
this.getJoke()
}

getJoke() {
this.jokesService.getRandomJokes()
.subscribe(joke => {
   this.jokes.unshift(joke)
})    
}
}
interface Joke{
id: number;
value: string;
}

This is how my service looks like, I think I'm missing something in it

import { HttpModule } from '@angular/http';
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()) 
.map(joke => <Joke>{id: joke.id, value: joke.value});
}

}

This code worked before restarting application but now this line of code says it can't find :

.map(joke => <Joke>{id: joke.id, value: joke.value});

Does your solution work? Your question doesn't seem very clear. — Jim Wright
– Jim Wright, Commented May 26, 2017 at 9:17
with a press of a button to push an API into the array and display it as an new <li> — Nadan Marenković
– Nadan Marenković, Commented May 26, 2017 at 9:26
Possible duplicate of Angular 2 onclick add new item in array — AVJT82
– AVJT82, Commented May 26, 2017 at 9:35

Arun Kumaresh · Accepted Answer · 2017-05-26 09:21:03Z

0

I think you're trying to convert the json returned in the api to array loop through the json and convert it into array

 loadMore() {
        this.jokes = this.service.getRandomJokes()
            .subscribe(joke => { 
 const getdata = [];
 for(let key in data){
getdata.push(data[key]);
} 
this.jokes =getdata
});
    }

answered May 26, 2017 at 9:21

Arun Kumaresh

6,2966 gold badges36 silver badges50 bronze badges

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

Comments

Le Dang Duong · Accepted Answer · 2017-05-26 09:23:06Z

0

https://api.chucknorris.io/jokes/random it's response a object.

Make response with a array

[
    {
      "category": null,
      "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
      "id": "RPVWYzLySH277dwK-Se3PQ",
      "url": "http://api.chucknorris.io/jokes/RPVWYzLySH277dwK-Se3PQ",
      "value": "Chuck Norris is allowed to draw pictures of Mohammad"
    }
]

answered May 26, 2017 at 9:23

Le Dang Duong

891 gold badge1 silver badge7 bronze badges

Comments

Hung Vi · Accepted Answer · 2017-05-26 09:30:23Z

0

I guess that you've got problem with parsing data in the response.

You can try this:

.map(res => res.json())
  .subscribe(
      data => console.log(data),
      err => console.log(err),
      () => console.log('Random Quote Complete')
  );

OR:

.map((res: Response) => {
  let data = (res.json() || {}).data;
  return data;
});

edited May 26, 2017 at 9:30

answered May 26, 2017 at 9:23

Hung Vi

4904 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angular 2 getting json data from api to array

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related