return json object with jsonp api call

Question

I'm trying to read a json object that is returned from a JSONP API call on Angular 4, but I keep getting "undefined" in the console when I try to print it.

This is my SearchService.ts file:

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


@Injectable()
export class SearchService {
  apiRoot = 'this/is/my/api';
  results: any;
  loading: boolean;

  constructor(private jsonp: Jsonp) {
    this.loading = false;
  }

  search(term: string) {
    const apiUrl = `${this.apiRoot}?search=${term}&rows=10&callback=JSONP_CALLBACK`;
    return this.jsonp.request(apiUrl).map(results => { this.results = results.json().data
    });
  }

}

And this is the search.component.ts file that I'm using to carry out the search:

import {Component, OnInit} from '@angular/core';
import 'rxjs/add/operator/toPromise';
import {SearchService} from '../../services/SearchService';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})

export class SearchComponent implements OnInit {

  loading = false;
  public result;

  constructor(private uniDirectory: SearchService) {
  }

  doSearch(term: string) {
    this.loading = true;
    this.uniDirectory.search(term).subscribe(results => this.result = results);
    this.loading = false;
    console.log('Result: ' + this.result);

  }

  ngOnInit() {

  }


}

If I try and print the result in the SearchService (i.e. console.log(results.json());), the json object is printed out. However, if I try to print out the same in the doSearch() method, then it prints undefined. Any suggestions are appreciated.

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — dfsq, Sep 04 '17 at 22:08
I don't quite understand how my question is a duplicate, could you provide me with a bit more guidance on what I'm doing incorrectly? — bawse, Sep 04 '17 at 22:22
Your question comes from lack of understanding of what A means in the word AJAX. Linked question has nice explanation. — dfsq, Sep 05 '17 at 07:24
Possible duplicate of [How do I return the response from an Observable/http/async call in angular2?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2) — AT82, Sep 05 '17 at 08:50

score 0 · Answer 1 · answered Sep 04 '17 at 22:25

Looks like you missing a return in your sevice,s map function, try this one

search(term: string) {
const apiUrl = `${this.apiRoot}?search=${term}&rows=10&callback=JSONP_CALLBACK`;
return this.jsonp.request(apiUrl)
            .map(results => { 
                this.results = results.json().data;//you might not need this one
                return results.json(); //add this one
                });

}

score 0 · Answer 2 · answered Sep 05 '17 at 00:55

0

I managed to fix it (someone initially posted this as an answer and removed it before I could accept it):

 this.uniDirectory.search(term).subscribe((results) => {
   this.result = results;
   console.log(this.result);
 });

answered Sep 05 '17 at 00:55

bawse

201
3
13

return json object with jsonp api call

2 Answers2