I've been trying to figure out how to make my code wait for the http request before moving on. The reason I need this is because I rely on the response to populate some variables in the HTML.
So,
Question 1: Do I really need to create a Service to make an HTTP request and return a Promise/Observable?
Question 2: In my code, is there a way to make it wait for the response without creating a separate service?
let link = 'http://working url';
let headers = new Headers({
'Content-Type': 'application/x-www-form-urlencoded',
'Accept': '*/*'
});
let options = new RequestOptions({headers: headers});
this.http
.post(link, this.loginString, options)
.map(res => res.json())
.subscribe(
data => {
let response = JSON.parse(data);
if(response.Successfull){
if(response.ReturnObject.length>0){
this.orders = this.orderJson(response.ReturnObject);
this.ordersWithoutGroup = response.ReturnObject;
this.empty = false;
}else{
this.orders= [];
this.empty= true;
}
}
}, err => {
this.showAlertError();
}, () => {
this.loadingPopup.dismiss()
});
}
Appreciate any help you can provide.
EDIT 1: HTML:
<ion-content class="stable-bg" scroll="true">
<div class="item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text" placeholder="Search Orders" ng-model="search">
</label>
</div>
<ion-list *ngIf="orders !== null" ng-repeat="(date, group) in orders">
<ion-item class="item-divider">{{ date }}</ion-item>
<ion-item class="item-icon-left item-icon-right" ng-repeat="order in group" (click)="goToDetail(order.ID)">
<div ng-show="order.DocumentNumber.indexOf(search) >-1 || !search ">
<i class="icon ion-card"></i>
<div>Nº {{ order.DocumentNumber }}
<span class="gray pull-right">{{ order.time }}</span>
</div>
<i class="icon ion-ios-arrow-right"></i>
</div>
</ion-item>
</ion-list>
<div ng-show="empty">
<div class="card">
<div class="item item-text-wrap ion-information-circled" (click)="check()">At the moment there isn't any order to
approve.</div>
</div>
</div>
</ion-content>
More code related to the .ts file:
import { Component , OnInit, Injectable} from '@angular/core';
import { NavController, AlertController, LoadingController } from 'ionic-angular';
import { Http, Headers, RequestOptions} from '@angular/http';
import * as moment from 'moment';
@Injectable()
@Component({
selector: 'page-orders',
templateUrl: 'orders.html'
})
export class OrdersPage implements OnInit{
orders: any;
loginString: any;
empty: boolean;
ordersWithoutGroup: any;
loadingPopup: any;;
constructor(public navCtrl: NavController,private alertController: AlertController, private http: Http, private loadingCtrl: LoadingController) {
this.loadingPopup = this.loadingCtrl.create({
content: 'Loading orders...'
});
// Show the popup
this.loadingPopup.present();
this.orders= {}
this.loginString = localStorage.getItem("Auth");
}
ngOnInit() {
this.getOrders();
}
EDIT 2: Check out my console.log of the orders: https://i.sstatic.net/CCEPU.png