How to push an object to array in angular2 and typescript?

Question

i have defined an array as follows,

markers: marker[] = [
    {
      lat: 51.673858,
      lng: 7.815982,
      label: 'A',
      draggable: true
    }
  ];

i am getting data from rest service and push the new object to markers.

private data: any;
  findLocation(): void {
    let result;
    result =   this.geoService.loaddata(this.location)
     .subscribe(data => {
       result = data;
       console.log(result);
       this.markers.push({'lat':results[0].geometry.location.lat,'lng':results[0].geometry.location.lng})
     });
  }

it throws an error saying file:

message: 'Argument of type '{ 'lat': any; }' is not assignable to parameter of type 'marker'. Property 'lng' is missing in type '{ 'lat': any; }'.'

result is

{ "results" : [ { "address_components" : [ { "long_name" : "Colombo", "short_name" : "Colombo", "types" : [ "locality", "political" ] }, { "long_name" : "Colombo", "short_name" : "Colombo", "types" : [ "administrative_area_level_2", "political" ] }, { "long_name" : "Western Province", "short_name" : "WP", "types" : [ "administrative_area_level_1", "political" ] }, { "long_name" : "Sri Lanka", "short_name" : "LK", "types" : [ "country", "political" ] } ], "formatted_address" : "Colombo, Sri Lanka", "geometry" : { "bounds" : { "northeast" : { "lat" : 6.9812866, "lng" : 79.8900852 }, "southwest" : { "lat" : 6.862390700000001, "lng" : 79.8223258 } }, "location" : { "lat" : 6.9270786, "lng" : 79.861243 }, "location_type" : "APPROXIMATE", "viewport" : { "northeast" : { "lat" : 6.980584400000001, "lng" : 79.8900852 }, "southwest" : { "lat" : 6.8625113, "lng" : 79.8225192 } } }, "place_id" : "ChIJA3B6D9FT4joRjYPTMk0uCzI", "types" : [ "locality", "political" ] } ], "status" : "OK" }

Solution 1

You have subscribed your data to result, not results.

private data: any;
  findLocation(): void {
    let result;
    // no use for "result" below
    // result = this.geoService.loaddata(this.location)
    // use the following instead
    this.geoService.loaddata(this.location)
     .subscribe(data => {
       result = data;
       console.log(result);
       this.markers.push({'lat':results[0].geometry.location.lat,'lng':results[0].geometry.location.lng})
     });
  }

so your push should look like:

this.markers.push({'lat':result[0].geometry.location.lat,'lng':result[0].geometry.location.lng})
         });

But this too will throw an error because in markers you have also declared label and draggable, so you need to push values to those attributes too.

Solution 2

Looks like you have a simple typo:

this.markers.push({
    'lat': results[0].geometry.location.lat,
    'lat': results[0].geometry.location.lng
})

should be:

this.markers.push({
    'lat': results[0].geometry.location.lat,
    'lng': results[0].geometry.location.lng
})

Solution 3

First of all, you have a typo there, you access a variable called results but there is only result.

Second, that result variable makes little sense. Try this:

// private data: any; // Remove this field
findLocation(): void {
    // no result variable here
    this.geoService.loaddata(this.location)
    .subscribe(results => { // declare results this way
        console.log(results);
        this.markers.push({
          'lat':results[0].geometry.location.lat,
          'lnt':results[0].geometry.location.lng
        });
    });
}

Solution 4

    this.geoService.loaddata(this.location)
       .subscribe(data => {
       result = data;
       this.markers.push({'lat':data.geometry.location.lat,'lng':data.geometry.location.lng})
    });

View more solutions