javascript - 通过 jsonp api 调用返回 json 对象

Question

我正在尝试读取从 Angular 4 上的 JSONP API 调用返回的 json 对象，但当我尝试打印它时，控制台中始终显示“未定义”。

这是我的 SearchService.ts 文件:

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

}

这是我用来执行搜索的 search.component.ts 文件:

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() {

  }


}

如果我尝试在 SearchService 中打印结果(即 console.log(results.json());)，则会打印出 json 对象。但是，如果我尝试在 doSearch() 方法中打印出相同的内容，则会打印出未定义的内容。任何建议表示赞赏。

Answer 1

看起来您在服务 map 函数中缺少返回，试试这个

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

}