How do you pass ajax success data out of a container function

Question

Having this function :

var mapdata={};
console.log( mapdata[0].phones );

function fetchSteeringRecs() 
{
    $.ajax({
        url      : "./php/ajxcontrol.php",
        type     : "POST",
        data     : { dorecs:1 },
        dataType : "json",
        async    : false,
        //success  : successHandler,
        success  : function(data) {
                      mapdata = data;
                      // console.log( data[0].phones );
                   }       
    });
}
/*
function successHandler(data, status ) {
    console.log( data[0].phones );
}
*/

i would like to use the returned data after assigning it to 'mapdata' object - but i keep getting error in console:

Uncaught TypeError: Cannot read property 'phones' of undefined

As can be seen i have tried accessing the data from within a callback successHandler function and it works ok - also i can access the returned data directly in the ajax success func (both commented out) - but i really need it in the 'global object 'mapdata'

Is this possible or is my technique here wrong?

See http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Jasen, Dec 16 '15 at 18:16

Scarecrow · Answer 1 · 2015-12-16T18:35:42.550

0

You should do

success  : function(data) {
                  console.log( data );
               }

to find the output data structure.

EDIT

use this

var mapdata;

function fetchSteeringRecs() 
{
    $.ajax({
        url      : "./php/ajxcontrol.php",
        type     : "POST",
        data     : { dorecs:1 },
        dataType : "json",
        async    : false,
        success  : function(data) {
                      mapdata = data;
                      successHandler();
                   }       
    });
}

function successHandler() {
    console.log( mapdata[0].phones );
}

edited Dec 16 '15 at 18:35

answered Dec 16 '15 at 18:15

Scarecrow

4,057
3
30
56

Not from outside of fetchSteeringRecs() func - data is undefined! - ive assigned data to mapdata global object, thats the pproblem. My console.log woks ok inside the ajax success func (as stated) it outputs 'phones' data - as does the handler function. I need 'mapdata' – Flim Flam Dec 16 '15 at 18:18
@FlimFlam console.log( mapdata[0].phones ); is throwing error. so first you be sure about your output data structure, then proceed.. – Scarecrow Dec 16 '15 at 18:21
console .log IS NOT throwing an error where i have commented them out - i left those lines in to show what i have tried. They BOTH work as expected - they both output the value of phones! - mapdata my global var is where i want to access data as assigned in the success func in ajax – Flim Flam Dec 16 '15 at 18:28
@FlimFlam I have updaed my code, please try once, if still got error then please share the mapdata 's data structure. – Scarecrow Dec 16 '15 at 18:37

score 0 · Answer 2 · answered Dec 16 '15 at 18:19

0

One simple way is create a function that will process the returned data and call that function in the success callback (should be using promises) like so:

function doStuffWithMapData(mapdata){
     console.log(mapdata);
}

...
...

                   success  : function(data) {
                      mapdata = data;
                      doStuffWithMapData(mapdata);
                      // console.log( data[0].phones );
                   }

Likewise, you could just use the global variable:

var mapdata = {};  
function doStuffWithMapData(){
         console.log(mapdata);
    }

    ...
    ...

                       success  : function(data) {
                          mapdata = data;
                          doStuffWithMapData();
                          // console.log( data[0].phones );
                       }

answered Dec 16 '15 at 18:19

A.O.

3,733
6
30
49

So there's no way i can use mapdata as ive declared it? without calling another function? thats what i didn't want to have to do! – Flim Flam Dec 16 '15 at 18:24
Yes, unless you just want to put all your code in the success callback....There is no other way to tell when the mapdata object will be accessible (when the success handler is called). It's not about WHERE you can access your global `mapdata` variable, but WHEN.... The question @Jasen referenced explains this in more detail. – A.O. Dec 16 '15 at 18:30
I had a sneaky suspicion it was the ajax race-condition thingy - data not being available when you expect it to be - catches me out every time.I have a fair bit to do with mapdata so i didnt want it all in a function - but as it is now the flow of data is broken unless i know when data/mapdata is available ... – Flim Flam Dec 16 '15 at 18:34
I'm not sure why you are apprehensive to process `mapdata` inside of a function.....I mean, how else were you expecting to do it? And the `flow of data` will always be the same it's up to us to structure our code to handle this.... – A.O. Dec 16 '15 at 18:40
Hi, no not apprehensive - just curious as to why? i've used the code structure in question on another script in this app and it works flawlessly (though i am only returning a string in that one) Yet returning a larger data object fails. I've grocked the page linked by @Jasen and got a better handle on it to help me proceed. - cheers – Flim Flam Dec 16 '15 at 18:55
Without seeing all your code it's very possible that I may be misunderstanding your objective, however I think the root cause still holds true....grock the hell out of that question there's a lot of great stuff there good luck! :) – A.O. Dec 16 '15 at 18:59

How do you pass ajax success data out of a container function

2 Answers2