Я проверил отправку запроса на тестовое сообщение через Postman и работал.Но когда я применил их в моем приложении Ionic3, оно не отображало результаты JSON в моем HTML-шаблоне.Вот ваши коды для справки:
buy-words.html
<!--
Generated template for the BuyWordsPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header></ion-header>
<ion-content class="buy-words">
<form class="form-create">
<div class="top-box">
<div class="div-img-shop">
<ion-icon class="img-shop" name="cube"></ion-icon>
</div>
<h2 class="shop-title">Shop</h2>
<!--<p class="desc">
You can also purchase these word packs starting at USD<span id="wc-rate">10</span>!
</p>-->
</div>
<div class="word-pack-list">
<h3 class="pack-title">Word Packs</h3>
<div class="desc-box">
<p class="desc">
You can also purchase these word packs starting at USD<span id="wc-rate">10</span>!
</p>
</div>
<!--<div *ngFor="let pack of packs" class="right-box">
<ion-item class="wp-list-item">
<ion-label class="wp-lbl">{{ pack.words }}</ion-label>
<ion-label class="wp-price">$ {{ pack.price }}</ion-label>
</ion-item>
</div>-->
<ion-slides pager="true" class="slide-wc">
<ion-slide *ngFor="let pack of packs">
<ion-item class="wp-list-item">
<p class="wp-lbl" stacked>{{ pack.words }}</p>
<p class="wp-words" stacked>Words</p>
<p class="wp-desc" stacked>{{ pack.description }}</p>
</ion-item>
<ion-label class="wp-price" stacked>Buy for $ {{ pack.price }}</ion-label>
</ion-slide>
</ion-slides>
</div>
</form>
</ion-content>
buy-words.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController, ToastController } from 'ionic-angular';
import { ApiProvider } from '../../providers/api/api';
/**
* Generated class for the BuyWordsPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-buy-words',
templateUrl: 'buy-words.html',
})
export class BuyWordsPage {
access_token = '';
token_type = '';
headers = {};
packs: Array<any> = [];
constructor(public navCtrl: NavController,
public navParams: NavParams,
public alertCtrl: AlertController,
public toast: ToastController,
public quickeApi: ApiProvider) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad BuyWordsPage');
}
ionViewWillEnter() {
this.token_type = this.quickeApi.getTokenType();
this.access_token = this.quickeApi.getAccessToken();
this.headers = {
'Authorization' : this.token_type + ' ' + this.access_token
}
var onSuccess = (response) => {
var result = JSON.parse(response.data);
// show alert if there is an error
if(result.errors.length !== 0)
{
this.alertCtrl.create({
title: 'ALERT',
subTitle: result.errors.join('. '),
buttons: ['Dismiss']
}).present();
return;
}
this.packs = [];
for(var i=0;i<result.length; i++)
{
this.packs.push(result[i]);
}
};
var onError = (error) => {
this.alertCtrl.create({
title: 'ALERT',
subTitle: error.error.toString(),
buttons: ['Dismiss']
}).present();
return;
};
this.quickeApi.listPacks(this.headers, onSuccess, onError);
}
}
api.ts
import { Injectable } from '@angular/core';
import { HTTP } from '@ionic-native/http';
/*
Generated class for the ApiProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class ApiProvider {
baseUrl = 'https://quickenow.com';
token_type = '';
accessToken = '';
client_id = <client_id here>;
client_secret = <client_secret here>;
deviceId = null;
constructor(public http: HTTP) {
// console.log('Hello ApiProvider Provider');
}
getClientId(){
return this.client_id;
}
getClientSecret(){
return this.client_secret;
}
setTokenType(value) {
this.token_type = value;
}
getTokenType() {
return this.token_type;
}
setAccessToken(value) {
this.accessToken = value;
}
getAccessToken() {
return this.accessToken;
}
login(data, onSuccess, onError) {
var url = this.baseUrl + '/api/oauth/login';
this.http.post(url, data, {}).then(onSuccess).catch(onError);
}
logout(headers, onSuccess, onError) {
var url = this.baseUrl + '/api/oauth/logout';
this.http.post(url, {}, headers).then(onSuccess).catch(onError);
}
createOrder(data, headers, onSuccess, onError) {
var url = this.baseUrl + '/api/order/create';
this.http.post(url, data, headers).then(onSuccess).catch(onError);
}
pollOrder(data, onSuccess, onError) {
var url = this.baseUrl + '/api/poll-order';
this.http.post(url, data, {}).then(onSuccess).catch(onError);
};
register(data, onSuccess, onError) {
var url = this.baseUrl + '/api/register';
this.http.post(url, data, {}).then(onSuccess).catch(onError);
}
networkLogin(data, onSuccess, onError) {
var url = this.baseUrl + '/api/login-network';
this.http.post(url, data, {}).then(onSuccess).catch(onError);
}
buyPacks(data, onSuccess, onError) {
var url = this.baseUrl + '/api/pack/buy';
this.http.post(url, data, {}).then(onSuccess).catch(onError);
}
listPacks(headers, onSuccess, onError) {
var url = this.baseUrl + '/api/pack/list';
this.http.post(url, {}, headers).then(onSuccess).catch(onError);
}
getCustomerInfo(headers, onSuccess, onError) {
var url = this.baseUrl + '/api/customer/info';
this.http.post(url, {}, headers).then(onSuccess).catch(onError);
}
}