I am working on ionic2 app. What I am trying to do is calculate the distance between my current location and user locations from API with Google Maps API DistanceMatrixService and http.get.
Here i'm using an API http://abithacoirmat.com/md/api/v1/nearby, which has a list of users with latitude and longitude. I need to list the users with the distance from my current location.
export class AboutPage {
public items: any;
constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http, public platform: Platform) {
this.http = http;
this.platform = platform;
this.platform.ready().then(() => {
this.http.get("http://abithacoirmat.com/md/api/v1/nearby").subscribe(data => {
this.items = JSON.parse(data['_body']).data;
//Destination array for google map destinations
var destArr = [];
for (let i = 0; i < this.items.length; i++) {
destArr.push({
lat: Number(this.items[i].latitude),
lng: Number(this.items[i].longitude)
});
}
Geolocation.getCurrentPosition().then((position) => {
var origin1 = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var geocoder = new google.maps.Geocoder;
var service = new google.maps.DistanceMatrixService;
service.getDistanceMatrix({
origins: [origin1],
destinations: destArr,
travelMode: 'DRIVING',
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function(response, status) {
if (status !== 'OK') {
alert('Error was: ' + status);
} else {
var originList = response.originAddresses;
for (var i = 0; i < originList.length; i++) {
var results = response.rows[i].elements;
for (var j = 0; j < results.length; j++) {
console.log(results[j].distance.text + ' in ' + results[j].duration.text);
//this.items[j].distance = results[j].distance.text + ' in ' + results[j].duration.text;
}
}
}
});
}, (err) => {
console.log(err);
});
}, error => {
console.log(error);
});
});
}
}
HTML
<ion-header>
<ion-navbar>
<ion-title>Nearby</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="mapbg">
<ion-list>
<ion-item-sliding *ngFor="let item of items">
<ion-item>
<ion-thumbnail item-left>
<img class="thmb" src="{{item.image}}">
</ion-thumbnail>
<h2>{{item.name}}</h2>
<p>{{item.model}}</p>
<p>{{item.distance}}</p>
</ion-item>
</ion-item-sliding>
</ion-list>
</ion-content>
When i try to use this code: this.items[j].distance = results[j].distance.text + ' in ' + results[j].duration.text;
i'm getting Runtime Error Cannot read property '0' of undefined
