Get Data From Local Json File In Vuejs Method Using JQuery $.getJSON()

I'm working on a demo app using Vuejs, and as part of it, I need to get some map data from a local .json file, get certain parts of it (such as lat/long values), and then put it in

Solution 1:

I'm not sure where do you want to access this outside the function. For example, you can assign result of $.getJSON to Vue's instance data by self.data = data, then you can access it outside of your $.getJSON

export default {
  name: 'HelloWorld',
  data () {
    return {
      center: {lat: 37.541885, lng: -77.440624},
      markers: [],
      data: null
    }
  },
  methods: {
    getMarkers: function () {
      var apparatus = {}
      var address = []
      var description = {}
      var self = this
      $.getJSON('../static/event1.json', function (data) {
        self.data = data // then you can access data outside of your function by reference this.data


        // What do I do here to get outside of this function so
        // I can manipulate it?

        apparatus = data.apparatus
        address = data.address
        description = data.description
      })
    }
  },
  created () {
    this.getMarkers()
  }
}

Solution 2:

I think you are looking for a way to use your data object's inside your method. You can use this to get access to your data object's :

this.markers = data;

UPDATE :

In your case, you have another scope in your method ( Your callback ) so you ned to use View Model. just before your getJSON line, define it like this :

var vm = this;

Then inside your callback, you can have access to your data object :

vm.markers = data;

notice that if you are using the older version's of vue ( below 2.x ) , you need to use it like this :

this.$data.markers = data;