Marker variable is undefined after get in Axios, VUE JS + LEAFLET + Axios

0
votes

The Axios response.data is okay. But when I use the markers variable in rendering the markers is undefined. I am a newbie and badly need your help for our project.

I am trying to render the markers from the link described in the code, but some I placed the axios request in the created, and in the mounted is the rendering of the leaflet map.

Screenshot of the code

<script>
/** Script Vue JS **/
new Vue({
  el: '#view-map',
  data: {
    map,
    map_link:'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    markerOption: {
      clickable: true,
      draggable: false
    },
    mapOptions: {
      center: [7.3087, 125.6841],
      zoom:8  
    },
    markers:[], //[{"image":"GMS-4-0112018-467_1527086274.jpg","derivation_code":"GMS-4-0112018-467","sample_description":"test 1 test is a test that test will be tested in test","latitude":"6.428152","longitude":"125.317857"},{"image":"GMS-1-0112018-963_1527134301.jpg","derivation_code":"GMS-1-0112018-963","sample_description":"nalaya lang","latitude":"7.311647","longitude":"125.636461"}],
    selectedSample: [],
  },
  methods: {
    getMarkers: function (){
        axios.get('http://127.0.0.1:8000/marker').then(response => {
                    this.markers = response.data;
            }).catch(error =>( console.log(error) ));
    },
    renderMarker: function(){
      for ( i = 0; i < this.markers.length; i++){
        console.log(this.markers[i]);
        var marker = new L.Marker([this.markers[i].latitude, this.markers[i].longitude], this.markerOption);
        marker.addTo(this.map);
        marker.bindPopup(`
            <h6 class="display-6">${this.markers[i].derivation_code}</h6>
            <img src="storage/images/${this.markers[i].image}" style="height:100%;width:100%">
        `);
      }
    },
    markerClicked: function(mrkr_data){
      this.selectedSample = mrkr_data.derivation_code;
      console.log(this.selectedSample);
    }
  },
  created: function(){
    this.getMarkers();
  },
  mounted: function(){
        this.map = new L.map('map', this.mapOptions);
        this.map.addLayer(new L.TileLayer(this.map_link));
        console.log(this.markers);
        this.renderMarker();
  }
});
</script>
1
laravelvue.jsleafletaxios
done sir. I already updated my question – tag singks
I think this is gonna be a good ol' race condition. Try putting a console.log() inside the response handler for getMarkers(), and see if that runs before or after renderMarker(). What is the value for this.markers inside ` renderMarker()`? – IvanSanchez
@IvanSanchez . the value of the renderMarker() is blank. But in the response of axios I tried to log it in the console the value is okay as expected, but outside of the axios declaration the even in the getMarkers function the markers variable is blank. – tag singks
Thanks for the comments. I found the solution for the problem. – tag singks

1 Answers

1
votes

I solved my problem. I treated the fetching of data in Axios get property as a Synchronous but it is an Asynchronous. Base in my previous code, I accessed the data when it is not updated so the value is blank.

/** Script Vue JS **/
new Vue({
  el: '#view-map',
  data: {
    map,
    map_link:'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    markerOption: {
      clickable: true,
      draggable: false
    },
    mapOptions: {
      center: [7.3087, 125.6841],
      zoom:8  
    },
    markers:[], //[{"image":"GMS-4-0112018-467_1527086274.jpg","derivation_code":"GMS-4-0112018-467","sample_description":"test 1 test is a test that test will be tested in test","latitude":"6.428152","longitude":"125.317857"},{"image":"GMS-1-0112018-963_1527134301.jpg","derivation_code":"GMS-1-0112018-963","sample_description":"nalaya lang","latitude":"7.311647","longitude":"125.636461"}],
    selectedSample: [],
  },
  created: function(){
     this.getMarkers();
  },
  mounted: function(){
        this.map = new L.map('map', this.mapOptions);
        this.map.addLayer(new L.TileLayer(this.map_link));
  }, 
  watch: {
    markers: function(){
        this.renderMarker();
    }
  },
  methods: {
    getMarkers: function (){
        axios.get('http://127.0.0.1:8000/marker').then(response => {
                    this.markers = response.data;
                    console.log(this.markers);
            }).catch(error =>( console.log(error) ));

        console.log(this.markers);
    },
    renderMarker: function(){
      for ( i = 0; i < this.markers.length; i++){
        console.log(this.markers[i]);
        var marker = new L.Marker([this.markers[i].latitude, this.markers[i].longitude], this.markerOption);
        marker.addTo(this.map);
        marker.bindPopup(`
            <h6 class="display-6">${this.markers[i].derivation_code}</h6>
            <img src="storage/images/${this.markers[i].image}" style="height:100%;width:100%">
        `);
      }
    },
    markerClicked: function(mrkr_data){
      this.selectedSample = mrkr_data.derivation_code;
      console.log(this.selectedSample);
    }
  },
});