ionic 2 undefined is not an object error

Question

I am new in ionic 2.I've encountered a problem.once I use map defining var map; it is working inside loadMap() function well. But if I define map like map:any;It is not working.Throwing an error like this.

Error: Uncaught (in promise): TypeError: undefined is not an object (evaluating 'this.map')

import { Component } from '@angular/core';
import { NavController,Platform } from 'ionic-angular';
import { Geolocation } from 'ionic-native';
import {DataService} from '../../providers/data-service';
declare var L:any;
@Component({
  selector: 'page-my-map',
  templateUrl: 'my-map.html',
  providers:[DataService]
})
export class MyMap {
      public data: any;

map:any=null;
markersLayer;

  myPositionLayer;
  myCircleLayer;
  showingon;
   LeafIconMe;
LeafIcon;


  constructor(platform: Platform, public dataService: DataService) {

      platform.ready().then(() => {

      Geolocation.getCurrentPosition().then((resp) => {
        });

    this.loadMap();
    this.loadData();

    });


  }

  loadMap(){

         this.map = L.map('map', {}).setView([40.980963, 29.0966243], 10);
L.tileLayer(tileURL, {
        maxZoom: 18,
        attribution: ''
    }).addTo(this.map);
     this.map.locate({ setView: true, maxZoom: 16 });


      this.dataService.getData()
        .then(data => {

          this.data = data;
         this.data.forEach(function(veri){
              console.log(veri.lat);
             L.marker([veri.lat, veri.lon]).addTo(this.map);

          })

        });
     console.log("map"+this.map);
  }
loadData(){
               console.log("data"+this.map);




    }


}

my npm list is like below.

npm list --depth=0
msson@ /Users/baris/ionic2/denden/msson
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @ionic/[email protected]
├── @ionic/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

can u please give me any suggestion to solve this problem. thank in advance..

Paul Samsotha · Accepted Answer · 2016-10-25 17:25:07Z

6

this.data.forEach(function(veri){
    console.log(veri.lat);
    L.marker([veri.lat, veri.lon]).addTo(this.map);
})

You need to use an arrow function (instead of function) to retain this context

this.data.forEach((veri) => {
    console.log(veri.lat);
    L.marker([veri.lat, veri.lon]).addTo(this.map);
})

answered Oct 25, 2016 at 17:25

Paul Samsotha

210k39 gold badges503 silver badges756 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ionic 2 undefined is not an object error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related