Question

无法读取API调用返回的JSON。这是我的服务档案。

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

@Injectable()
export class BaseballService {

  constructor(private jsonp: Jsonp) {}

  search() {

    return this.jsonp.request('http://api.sportradar.us/mlb-t6/players/6e1cac5c-b059-4b80-a267-5143b19efb27/profile.json?api_key=[hidden]')
                .subscribe((data) => {
                (data)
    })}
}

从这里调用：

import { Component } from '@angular/core';
import { BaseballService } from './baseball.service'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [BaseballService]
})
export class AppComponent {
  title = 'Baseball App';

  constructor(private _baseballService: BaseballService) {

  }

  ngOnInit(){
    let zx = this._baseballService.search();
    console.log(zx);
  }
}

我无法读取JSON数据并收到此错误：JSONP注入脚本未调用回调。我已经尝试过HTTP请求但无处可去。我尝试过以下示例：http://plnkr.co/edit/8ap1Lm?p=preview

Answer 1

使用http对象

尝试此操作

import { Injectable } from '@angular/core';
import { URLSearchParams, Jsonp, Http, Headers } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';

@Injectable()
export class BaseballService {

headers: Headers;

constructor(private http: Http) {
     this.headers = new Headers();
     this.headers.append('content-type', 'application/json');    
}

search() {

return this.http.get('http://api.sportradar.us/mlb-t6/players/6e1cac5c-b059-4b80-a267-5143b19efb27/profile.json?api_key=[hidden]',this.headers).map(resp => resp.json())   
}

并在组件中

import { Component, OnInit } from '@angular/core';
import { BaseballService } from './baseball.service'

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
 providers: [BaseballService]
})
export class AppComponent implements OnInit {
title = 'Baseball App';
zx: any;

 constructor(private baseballService: BaseballService) {
}

ngOnInit(){
   this.baseballService.search().subscribe((data) => {
     this.zx = data;
     console.log(this.zx);
  });

} }

无法读取从API尝试Angular2返回的JSON

1 个答案: