https://i.sstatic.net/s3Zsn.png
I've encountered an issue with accessing elements of an array in my code. Upon logging the array using :
console.log(MyArray);
The console output displays the content as shown in the image.
The data in this array comes from an API. Rather than accessing it inside the callback function, I aim to use the data later for plotting markers on a map.
However, I am currently facing a roadblock in achieving this.
private MyArray: any[] = [];
ngOnInit() {
this.httpservice.getdata().subscribe
(data=>
{this.MyArray.push(data);});
console.log(MyArray[0]);//My attempt at accessing it here
var mapProp = {
center: new google.maps.LatLng(51.508742, -0.120850),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),
mapProp);
var markerarray: any[] = [];
//My intention is to eventually access the data here
for (i = 0; i < 21; i++) {
markerarray[i] = new google.maps.Marker({
position: new google.maps.LatLng(MyArray[0][i].latitude, MyArray[i]
[i].longitude), //This line
title: MyArray[1][i].name, //and this
map: map
});
}
The structure of my httpservice.ts is as follows:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Response, RequestOptions, Headers } from '@angular/http'
@Injectable()
export class HttpService {
constructor(private hhtp: Http) { }
getdata() {
return this.hhtp.get('url').map((res: Response) => { //the url which I am using
return res.json();
})
}
}