Ionic 2 Yelp API

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ionic 2 Yelp API相关的知识,希望对你有一定的参考价值。

我正在尝试将Ionic 2应用程序连接到Yelp的API。现在我只是使用从CLI生成并在我的localhost上运行的空白Ionic 2应用程序。

我的代码:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  restaurants:any;
  constructor(public navCtrl: NavController, public http: Http) {
    var headers = new Headers();
    headers.append('Authorization', 'Bearer someString');
    var options = new RequestOptions({headers: headers});

    this.http.get('https://api.yelp.com/v3/businesses/search?term=deli20&latitude=39.59754&longitude=-104.872934', options).map(res => res.json()).subscribe(data => {
        this.restaurants = data.data.children;
        console.log(this.restaurants);
    });
  }



}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <!--Just using Ionic 2's default home page, just wanna output my JSON to the console for now.-->
</ion-content>

页面呈现正确,但我在控制台中收到错误:“无法加载资源:预检响应不成功”

响应如下:

{"error": {"code": "TOKEN_MISSING", "description": "An access token must be supplied in order to use this endpoint."}}

对我可能缺少什么的想法?

答案

将此chrome plugin添加到您的浏览器,打开它并重新加载页面。它应该工作正常

以上是关于Ionic 2 Yelp API的主要内容,如果未能解决你的问题,请参考以下文章

Yelp API - Node.js中每秒请求太多

Yelp API 和 AngularJS

需要一个类似于 Yelp 和 Google Places 的良好商业搜索 API

Django 预加载 Yelp API 结果

如何在邮递员上提出Yelp API GET请求?

Alamofire 获取请求和 JSON 响应(Yelp API)