javascript - 从查询字符串中获取数据

Question

我正在尝试从此 URL 获取数据:https://api.chucknorris.io/jokes/search?query=chuck(chuck 是搜索词，可以是其他任何内容)。

我想从数组中获取 value 属性。 postman 给我这个:

{
"total": 9735,
"result": [
{
  "category": [
    "dev"
  ],
  "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
  "id": "zdj0bfkjsmup6pkb2rpmbw",
  "url": "http://api.chucknorris.io/jokes/zdj0bfkjsmup6pkb2rpmbw",
  "value": "Chuck Norris is the only human being to display the Heisenberg 
  uncertainty principle - you can never know both exactly where and how 
  quickly he will roundhouse-kick you in the face."
 },

我的服务(已编辑):

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

@Injectable()
export class PretragaService {
constructor(private http: Http){}
searchJokes(str: string){return 
this.http.get('https://api.chucknorris.io/jokes/search?query=' + str)
                    .map(res => res.json())
                    .map(joke => {return joke.value});
}

}

组件(已编辑):

import { Component } from '@angular/core';
import { PretragaService } from '../services/pretraga.service';

@Component({
selector: 'pretraga',
template: `
<input type="text" class="form-control" placeholder="pretraži" 
[(ngModel)]="searchJoke"
name="searchJoke" (keyup)="searchJokes()">
<div *ngIf="searchRes">
<div *ngFor="let joke of searchRes">
<ul>
<li>{{joke}}</li>
</ul>
</div>
</div>
`,
providers: [PretragaService]
})
export class PretragaComponent {
searchJoke: string;
searchRes: any[]=[];

constructor(private searchService: PretragaService){

}
searchJokes(){
   this.searchService.searchJokes(this.searchJoke)
   .subscribe(joke => {
   this.searchRes = joke;
});
}

我有代表一个对象的类:

export class Joke{
value: string;

}

Answer 1

//修改你的 myService 类:

    searchJokes(str: string){return 
    this.http.get('https://api.chucknorris.io/jokes/search?query=' + str)
                        .map(res => res.json())
                        .map(joke => {return joke.value});
    }

//和组件:

    searchJoke: string;
    searchRes: any[]=[];

    constructor(private searchService: PretragaService){

    }
    searchJokes(){
       this.searchService.searchJokes(this.searchJoke)
       .subscribe(joke => {
       this.searchRes = joke;
    });