CODEWITHSUNDEEP
angularjsonp
1033
1033

Reputation: 61

Angular2 Flickr JSONP

I am very new to AngularJS. I am making a Flickr public feed app using Angular2 but I encountered this problem.

I couldn't find a way to get the JSONP working. What should I do to return the JSON object?

enter image description here

Here's the codes

flickr.service.ts

import { Injectable } from '@angular/core';
import { Jsonp, Http } from '@angular/http'; //use jsonp module to fetch the data from the api call

import 'rxjs/Rx'; // use rxjs as the observable

@Injectable()

export class FlickrService {

  url: string;
  apiKey: string = 'ffed2ef9dede27481c3195eea1be61eb';

  constructor(private _jsonp: Jsonp) {
    this.url = `https://api.flickr.com/services/feeds/photos_public.gne?&api_key=${this.apiKey}&per_page=12&format=json&nojsoncallback=1`;
  }

  getFeed() {
    return this._jsonp.get(this.url)
      .map(res => res.json());
  }

  searchTag(searchTerm: string) {
    return this._jsonp.get(this.url+'&tag='+searchTerm)
      .map(res => res.json());
  }
}

flickr.component.ts

import { Component } from '@angular/core';
import { FlickrService } from '../services/flickr.service';
@Component({
  moduleId: module.id,
  selector: 'flickr',
  templateUrl: './flickr.component.html'
})
export class FlickrComponent {
  feedList: Array<Object>;
  searchList: Array<Object>;
  searchTerm: string;
  constructor(private _flickrService: FlickrService) {
    this._flickrService.getFeed().subscribe(res => {
      console.log(res);
    });
  }
}

Upvotes: 1

Views: 467

Answers (2)

gellybutton
gellybutton

Reputation: 33

For anyone struggling to get this to work as I did, I finally got it to work in the following manner in Angular 5:

In app.module.ts add HttpClientJsonpModule

import {HttpClientModule, HttpClientJsonpModule, HttpClient} from '@angular/common/http';

imports: [
    ...

    HttpClientModule,
    HttpClientJsonpModule
...
]

in an api service I have:

getFlickrFeed() {
    const url = 'https://api.flickr.com/services/feeds/photos_public.gne?format=json&id=YOUR_ID&jsoncallback=JSONP_CALLBACK';

    return this.http.jsonp(url, 'JSONP_CALLBACK').pipe(
            tap(
                data => data
            )
        );
}

In my module:

    this.api.getFlickrFeed().subscribe(
        data => {

            this.flickrFeed = data['items'];

            console.log(this.flickrFeed);
        }
    );

Upvotes: 2

MichaelSolati
MichaelSolati

Reputation: 2872

In order to have the Jsonp library work for me I've needed to end my queries with callback=JSONP_CALLBACK. So try updating your service to this...

import { Injectable } from '@angular/core';
import { Jsonp, Http } from '@angular/http';

import 'rxjs/Rx'; // use rxjs as the observable

@Injectable()

export class FlickrService {

  url: string;
  apiKey: string = 'ffed2ef9dede27481c3195eea1be61eb';

  constructor(private _jsonp: Jsonp) {
    this.url = `https://api.flickr.com/services/feeds/photos_public.gne?&api_key=${this.apiKey}&per_page=12&format=json`;
  }

  getFeed() {
    return this._jsonp.get(this.url+'&callback=JSONP_CALLBACK')
      .map(res => res.json()).catch(this._handleError);
  }

  searchTag(searchTerm: string) {
    return this._jsonp.get(this.url+'&tag='+searchTerm+'&callback=JSONP_CALLBACK')
      .map(res => res.json()).catch(this._handleError);
  }

  private _handleError(error: Response | any) {
    console.log(error);
    return Observable.throw(error.code);
  }
 }

Also, I'm not 100% sure if the callback=JSONP_CALLBACK needs to be the last argument of the query... But any and all documentation I've ever read has it there, so I've just done that and it has worked just fine for me.

Upvotes: 1

Related Questions