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" }

why two lat in your json?

asdf_enel_hak
– asdf_enel_hak

2017-01-25 13:08:47 +00:00
Commented Jan 25, 2017 at 13:08 — asdf_enel_hak
– asdf_enel_hak, Commented Jan 25, 2017 at 13:08
What's in result[0]

Mitesh Pant
– Mitesh Pant

2017-01-25 13:09:06 +00:00
Commented Jan 25, 2017 at 13:09 — Mitesh Pant
– Mitesh Pant, Commented Jan 25, 2017 at 13:09

AVJT82 · Accepted Answer · 2017-01-25 13:29:25Z

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.

Brandon Taylor · Accepted Answer · 2017-01-25 13:09:01Z

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
})

answered Jan 25, 2017 at 13:09

Brandon Taylor

34.7k16 gold badges109 silver badges155 bronze badges

3 Comments

Brandon Taylor Over a year ago

Do you still get the same error? Given the shape of the data you've added to your question, the hierarchy looks correct.

Sajeetharan Over a year ago

ok sorry guys, i was missing the other two properties label and draggable

D. J. Over a year ago

For anyone trying to find the difference, note the "lat" / "lng" on the second input. Took me long to find.

Tamas Hegedus · Accepted Answer · 2017-01-25 13:12:03Z

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
        });
    });
}

Yoav Schniederman · Accepted Answer · 2017-01-25 14:55:18Z

1

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

answered Jan 25, 2017 at 14:55

Yoav Schniederman

5,4033 gold badges30 silver badges32 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Related