fetching data from query string

Question

I'm trying to fetch data from this URL:https://api.chucknorris.io/jokes/search?query=chuck (chuck is the search term, it can be anything else).

I want to get the value property from the array. Postman gets me this:

{
"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."
 },

my service(edited):

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});
}

}

Component(edited):

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;
});
}

I have the class that represents an object:

export class Joke{
value: string;

}

So you are getting value property in your json object what else is required.? Your question is not clear ! Please elaborate. — Harrisss
– Harrisss, Commented May 28, 2017 at 9:58
It all depends on API, so just check the API documentation if you can pass some conditional parameters in Url to fetch just the values or if it is your API then modify it send back only values. Even if not, you can easily modify the object coming from response to just get the values . Like var myArray = obj.result.map(function(res) {return res.value}). And then you have myArray as an array of all the retrieved values — Harrisss
– Harrisss, Commented May 28, 2017 at 10:07
when i execute my code, error says: Cannot read property 'unshift' of undefined — Nadan Marenković
– Nadan Marenković, Commented May 28, 2017 at 10:40

Harrisss · Accepted Answer · 2017-05-28 11:30:20Z

1

// Modify your myService class :

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

// and component :

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

    constructor(private searchService: PretragaService){

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

edited May 28, 2017 at 11:30

answered May 28, 2017 at 10:56

Harrisss

3631 silver badge11 bronze badges

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

13 Comments

Nadan Marenković Over a year ago

is something wrong with this html? <input type="text" class="form-control" placeholder="pretraži" [(ngModel)]="searchJoke" name="searchJoke" (keyup)="searchJokes()"> <div *ngIf="searchRes"> <div *ngFor="let joke of searchRes"> {{joke.value}} </div> </div>

Harrisss Over a year ago

After making the changes as mentioned in answer above your values as an array is in this.searchRes. so just render it directly , instead of {{joke.value}} it should be {{joke}} You may even check the values in this.searchRes by printing it in console.log(this.searchRes)

Nadan Marenković Over a year ago

it doesn't render, i changed it to {{joke}}, and console returns undefined

Nadan Marenković Over a year ago

this is html <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>

Nadan Marenković Over a year ago

the console returns empty arrays []length: 0__proto__: Array(0)

|

Collectives™ on Stack Overflow

fetching data from query string

1 Answer 1

13 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Linked

Related