-1

I'm currently working with google maps and I want to save some locations in a database and retrieve them through an ajax call, after which I make JavaScript objects from the locations.

As for the code I am not really sure why this is not working, can someone clear this up for me?

Chrome Console: Uncaught TypeError: this.processData is not a function 

var Locations = {
    count: 0,
    location: [],
    processData: function (data) {
        console.log(data);
    },
    getData: function () {
        'use strict';
        
        jQuery.ajax({
            type: 'get',
            url: '../../php/functions/getLocations.function.php',
            dataType: 'json',
            success: function (data) {
                this.processData(data);
            }
        });
    }
};
About the comment Kevin B posted, the done part should run when the async call is complete right? Last edit: 
function getLocation() {
    return $.ajax({
        type: 'get',
        url: '../../php/functions/getLocations.function.php',
        dataType: 'json'
    });
}

getLocation().done(function(result) {
    console.log(result);
    return result;
});
Smoothal
  • 45
  • 1
  • 10
  • I edited this post with a new problem.. – Smoothal Sep 14 '16 at 20:19
  • and it's still a dupe, but of another question: you cannot return from an asynchronous function. that is impossible. – Kevin B Sep 14 '16 at 20:29
  • I rolled the question back because your edit invalidated existing answers. If you have a new question you should ask it as a new question. however, the one you were going to ask is a very popular dupe; you should search first. http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call – Kevin B Sep 14 '16 at 20:30
  • So I need to wait every 90 minutes when another problem pops up? Owyeh, I can return from an asynchronous function `function getLocation() { return $.ajax({ type: 'get', url: '../../php/functions/getLocations.function.php', dataType: 'json', success: function (data) { return data; } }); } return getLocation();` – Smoothal Sep 14 '16 at 21:07
  • *" Owyeh, I can return from an asynchronous function"* well, you can try, but it won't work. the 90 minute delay gets smaller if you ask good questions and/or participate positively within the community (answering questions and receiving upvotes for example) – Kevin B Sep 14 '16 at 21:09
  • The question you posted had a really long and precise answer that helped me under the headtext jQuery: Use deferred objects. I follow this script but it does not seem to work. – Smoothal Sep 14 '16 at 21:15
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/123389/discussion-between-smooth-and-kevin-b). – Smoothal Sep 14 '16 at 21:20

2 Answers2

2

The keyword this refers to the scope it was initialized in. So in your case it is the scope of the success-function. It doesn't refer to the object itself.

For this to work you have to cache the reference to the object to use it inside the success-function or reference the object itself.

Object reference:

jQuery.ajax({
  type: 'get',
  url: '/echo/json/',
  dataType: 'json',
  success: function(data) {
    Locations.processData(data);
  }
});

Cached this

getData: function() {
    'use strict';
    let _this = this;
    jQuery.ajax({
      type: 'get',
      url: '/echo/json/',
      dataType: 'json',
      success: function(data) {
        _this.processData(data);
      }
    });
  }

Fiddle

empiric
  • 7,449
  • 6
  • 35
  • 44
0

this is pointing to ajax settings object. Either use a $.proxy or use this after storing it in a variable so that you are targeting the right context

getData: function () {
        'use strict';
        var thisLocation = this;
        jQuery.ajax({
            type: 'get',
            url: '../../php/functions/getLocations.function.php',
            dataType: 'json',
            success: function (data) {
               thisLocation.processData(data);
Sushanth --
  • 53,795
  • 7
  • 57
  • 95