jsonp call to Etsy

Question

I'm trying to list products from an Etsy profile through a service, using the provided syntax in the developers page for jsonp: https://www.etsy.com/developers/documentation/getting_started/jsonp

This is my service:

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

@Injectable()
export class EtsyService {

  constructor(
    private jsonp: Jsonp
  ) { }

  listProducts(){
    this.jsonp.get("https://openapi.etsy.com/v2/listings/513882265.js?callback=getData&api_key=YOURAPIKEY")
      .first()
      .subscribe(
        (data) => {
          console.log(data);
        });
  }

}

I get two errors:

Uncaught ReferenceError: getData is not defined

and

ERROR Response {_body: "JSONP injected script did not invoke callback.", status: 200, ok: true, statusText: "Ok", headers: Headers…}

score 1 · Accepted Answer · answered May 25 '17 at 14:27

I found the solution by myself. You need to use JSONP_CALLBACK as the default callback in the url syntax. This would be the corrected code for the service:

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

@Injectable()
export class EtsyService {

  constructor(
    private jsonp: Jsonp
  ) { }

  listProducts(){
    this.jsonp.request("https://openapi.etsy.com/v2/listings/513882265.js?callback=JSONP_CALLBACK&api_key=YOURAPIKEY", { method: 'Get' })
      .map((data: any) => data.json())
      .subscribe(
        (data: any) => {
            console.log(data);
        }
    )
  }

}

jsonp call to Etsy

1 Answers1