用jsonp api返回json對象調用

我試圖讀取從Angular 4上的JSONP API調用返回的json對象，但當我嘗試打印它時，我在控制檯中不斷收到「undefined」。用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（）方法中打印出相同的內容，則它會打印未定義的內容。任何建議表示讚賞。

來源

2017-09-04 bawse

可能重複[如何從異步調用返回響應？]（https：//stackoverflow.c om/questions/14220321/how-do-i-return-the-an-asynchronous-call） – dfsq

我不太明白我的問題是如何重複的，你能否給我提供更多的指導我做錯了什麼？ – bawse

你的問題來自對AJAX這個詞的含義的理解。鏈接的問題有很好的解釋。 – dfsq

看起來你缺少你服務隊一回，S 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 
       });

}

來源

2017-09-04 22:25:19 lucas

這不起作用，你可以創建一個plunker嗎？ – bawse

我設法解決它（有人最初發布此作爲一個答案，並刪除它我可以接受它之前）：

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

來源

2017-09-05 00:55:36 bawse

用jsonp api返回json對象調用

回答

相關問題