title: Angular 2 getting json data from api to array
body: <p>I need to fetch JSON data to the array, and with the press of a button to create a new list. Any solutions?</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { RandomService } from '../services/random.service';
  
  @Component({
  selector: 'pocetna',
  template: `
  &lt;ul&gt;
  &lt;li *ngFor="let joke of jokes"&gt;{{joke.value}}&lt;/li&gt;
  &lt;/ul&gt;
  &lt;button (click)="getJoke()"&gt;more jokes&lt;/button&gt;`,
  
  providers: [RandomService]
  })
  export class PocetnaComponent  { 
  jokes:Joke[] = [];
  
  constructor(private jokesService: RandomService){}
  
  ngOnInit() {
  this.getJoke()
  }
  
  getJoke() {
  this.jokesService.getRandomJokes()
  .subscribe(joke =&gt; {
     this.jokes.unshift(joke)
  })    
  }
  }
  interface Joke{
  id: number;
  value: string;
  }
  </code></pre>
  
  <p>This is how my service looks like,
  I think I'm missing something in it</p>
  
  <pre><code>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 =&gt; res.json()) 
  .map(joke =&gt; &lt;Joke&gt;{id: joke.id, value: joke.value});
  }
  
  }
  </code></pre>
  
  <p>This code worked before restarting application but now this line of code says it can't find :</p>
  
  <pre><code>.map(joke =&gt; &lt;Joke&gt;{id: joke.id, value: joke.value});
  </code></pre>