Using foursquare API with Angular

Question

I'm having issues figuring out how to use Foursquare API (search capability) within my Angular application.

My project structure looks like this

app
  components
    app.ts
    search.ts
  services
    foursquare.ts
  typings
  boot.ts
index.html

foursquare.ts looks like this

import {Injectable, Inject} from 'angular2/core';
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';

import 'rxjs/add/operator/map';

const CLIENT_ID = 'My client id';
const SECRET = 'My secret';
const URL : string = 'https://api.foursquare.com/v2/venues/search?client_id='+CLIENT_ID+'&client_secret='+SECRET+'&v=20130815';

@Injectable()
export class FoursquareService {

 constructor(public http:Http) {
   this.http = http;
 }

 foursquareGet(data) {
   return this.http.get(URL+data).map(res => res.json());
 }
}

And I am trying to use it within search.ts in a following way

import {Component} from 'angular2/core';
import {FoursquareService} from '../../services/foursquare'

@Component({
  templateUrl : 'app/components/new-listing/new-listing.html',
  providers : [FoursquareService]
})

export class NewListingComponent {
  constructor(service : FoursquareService) {
    console.log(service.foursquareGet('&ll=40.7,-74&query=sushi'));
  }
}

This returns an Observable inside console that I have no idea how to use, and would rather like it to return an array of JSON objects that meet the criteria. I'm trying to follow documentation on this, but have no idea what step to do next.

score 1 · Accepted Answer · edited May 23 '17 at 12:09

1

Yes, the get mezthod of the Http class returns an observable. You can explicitly subscribe on it and use the result within your template:

export class NewListingComponent {
  constructor(service : FoursquareService) {
    service.foursquareGet('&ll=40.7,-74&query=sushi')
       .subscribe(data => {
         this.result = data;
       });
  }
}

You can also go further by leveraging the async pipe to let it handle the observable. In this case you can set the observable as attribute of your component:

@Component({
  template: `
    <ul>
      <li *ngFor="#elt of result | async">{{elt.something}}</li>
    </ul>
  `
})
export class NewListingComponent {
  constructor(service : FoursquareService) {
    this.result = service.foursquareGet('&ll=40.7,-74&query=sushi');
  }
}

This answer could give you more hints on this: How to Consume Http Component efficiently in a service in angular 2 beta?.

Hope it helps you, Thierry

edited May 23 '17 at 12:09

Community

1
1

answered Jan 13 '16 at 12:21

Thierry Templier

198,364
44
396
360

Where would be correct place to define result variable? – Ilja Jan 13 '16 at 12:24
Since you want to use it in your component, it must be part of it. I mean a class attribute. It's implicit in the code I provided. But you can define it explicitly: `result: ResultClass[];` right below the line `export class NewListingComponent`. – Thierry Templier Jan 13 '16 at 12:26
I see, and on last question, I assume there is an import that needs to be added for RequestClass ? – Ilja Jan 13 '16 at 12:56

score 0 · Answer 2 · answered Jan 13 '16 at 12:18

0

Use subscribe:

service.foursquareGet('&ll=40.7,-74&query=sushi').subscribe(data=> this.data=data);

answered Jan 13 '16 at 12:18

Michael Kang

52,003
16
103
135

Throws an error for data (does not exist on type NewListingComponent) – Ilja Jan 13 '16 at 12:20
define data as a member variable, or do something else with it. – Michael Kang Jan 13 '16 at 12:21

Using foursquare API with Angular

2 Answers2