Unable to read JSON returned from API trying Angular2

Question

Unable to read the JSON returned from an API call. Here is my Services File.

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

which is called from here:

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

I can't read the JSON data and am getting this error: JSONP injected script did not invoke callback. I have tried a HTTP request but got nowhere. I tried following this example: http://plnkr.co/edit/8ap1Lm?p=preview

I haven't used JSONP with Angular, but see if the first answer here helps out a bit: stackoverflow.com/questions/35233604/… — Rob Zuber
– Rob Zuber, Commented Jun 24, 2017 at 3:00

alehn96 · Accepted Answer · 2017-06-25 00:07:25Z

1

try this with http object

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

and in the component

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

} }

edited Jun 25, 2017 at 0:07

answered Jun 24, 2017 at 5:37

alehn96

1,4031 gold badge14 silver badges23 bronze badges

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

5 Comments

JohnnyBizzle Over a year ago

No "Access Control Allow Origin" header is present is the error I get.

alehn96 Over a year ago

But this problem is in the server, enable cors

JohnnyBizzle Over a year ago

I've been trying to do that for half an hour. :/ Any idea how to do that with Angular?

alehn96 Over a year ago

Access Control Allow Origin is a problem of backend, you need enable in the server cors, what framework you use in the backend, you can test the web service with curl

JohnnyBizzle Over a year ago

I will try adding crossorigin.me to the api call request. Hopefully this will work.

Collectives™ on Stack Overflow

Unable to read JSON returned from API trying Angular2

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related