JSON data and functions

Question

So I am having troubles understanding passing JSON data.

function getFooterContent(){
//ajax call to get json file 
$.getJSON("scripts/pageData/footer/footerData.json", function(jsonData){
    console.log(jsonData);
    return jsonData;
}).fail(function(){
    console.log("fail");    
    return -1;
});

//Return the json file 
}

function someFunction(){
    var someContent = new Object();
someContent = getFooterContent();
console.log(someContent);
}

So right now I'm calling a JSON file. And when I console.log(jsonData) I get an Object, which is what I want. So then I can someContent.theContent. Though when the jsonData is returned to the someFunction and I console.log(someContent) I get undefined. I don't understand, I thought it would be an object like it is in the getJSON function.

score 4 · Answer 1 · edited May 23 '17 at 12:28

4

getJSON is called asynchronously, so you are not getting what you expect.

Let me explain:

function getFooterContent(){
//ajax call to get json file 
$.getJSON("scripts/pageData/footer/footerData.json", 
  function(jsonData){ // This function is executed when request is ready and server responds with OK
    console.log(jsonData);
    return jsonData;
}).

fail(function(){ // This when servers responds with error
    console.log("fail");    
    return -1;
});

//Return the json file 
// You are returning undefined actually
}

function someFunction(){
    var someContent = new Object();
someContent = getFooterContent();
console.log(someContent);
}

You need:

function someFunction(){
    var someContent = new Object();
    getFooterContent(function(someContent){
      // someContent is passed by getFooterContent
      console.log(someContent);

    });
}

Here is how you pass arguments to a callback JavaScript: Passing parameters to a callback function

For your function it will be:

function getFooterContent(done, fail){
  $.getJSON("scripts/pageData/footer/footerData.json", 
  function(jsonData){ // This function is executed when request is ready and server responds with OK
    // console.log(jsonData);
    // return jsonData;
    done.call(null, jsonData); // or done.apply()
}).

fail(function(){ // This when servers responds with error
    // console.log("fail");    
    // return -1;
    fail.call(); // or fail.apply()

});
}

edited May 23 '17 at 12:28

Community

1
1

answered Apr 30 '13 at 21:32

sites

21,417
17
87
146

So if I want to save the jsonData to a variable and return it, how would I do so? – pmac89 Apr 30 '13 at 21:39
Alright one last question hopefully. The function(jsonData) is the callback function I am executing, correct? And by your example, the getFooterContent execution sends a function with a parameter with someContent. How does this get returned to the someFunction? – pmac89 Apr 30 '13 at 22:01
Okay, I think I got it. I just don't understand the last bit. I am able to print the someContent now. Though when I have someContent = getFooterContent(); and the function is as function getFooterContent(done, fail) like you have. Though I don't understand what done and fail are nor the done.call(null, jsonData); – pmac89 Apr 30 '13 at 22:21
Though it doesn't work when I removed the promise code below. – pmac89 Apr 30 '13 at 22:25
`Though I don't understand what done and fail are` this is passing functions in parameters list of other functions. – sites Apr 30 '13 at 23:36
`nor the done.call(null, jsonData);` I got complicated there you can use `done(jsonData)` – sites Apr 30 '13 at 23:39
So, is done a function I define? Or are you talking about the .done in jQuery's callback function? I'm still having a hard time conceptualizing where the data from the .getJSON() method. I understand it is an asynchronous call and that data is not synchronized with my current Javascript and I guess I'm trying to get it synchronized. Though I got it working when I did with the promise example below. Would I just do the .done and call the Javascript function I want and send the data with it? Then store it into a variable in that function? – pmac89 May 01 '13 at 00:23

Ayush · Accepted Answer · 2013-05-01T00:19:15.107

2

This is beacause $.getJSON is asynchronous. So, when getFooterContent() returns, at that point the JSON data hasn't been retrieved yet, hence the undefined.

What you should instead do is have getFooterContent() return a promise object.

function getFooterContent() {
    var promise = $.getJSON("url");
    return promise;
}

function someFunction() {
    var promise = getFooterContent();
    var outsideCopy;

    promise
    .done(function(data) {
        outsideCopy = data;
        console.log(outsideCopy);
    })
    .fail(function(e) {
        console.log('Error');
        console.log(e);
    });
}

The above example can be shortened by removing the variable declarations. I left them in so the code is easier to understand

edited May 01 '13 at 00:19

answered Apr 30 '13 at 21:31

Ayush

41,754
51
164
239

But then how do I access the data that the promise has? – pmac89 Apr 30 '13 at 22:33
The data is the first parameter passed into the `done` function. See the `console.log(data);` statement. – Ayush Apr 30 '13 at 22:51
So do I have to keep the data inside that function? There's no way for me to use the data outside the function? – pmac89 May 01 '13 at 00:03
I've edited the answer to show how you can assign it to a variable outside that function – Ayush May 01 '13 at 00:19
Though if I place the outsideCopy outside of the promise I get undefined? Again I know it isn't synchronized. Do I pass outsideCopy to a function then? – pmac89 May 01 '13 at 00:32
Yes, pass it to a function from within done(). Everything has to be event based. – Ayush May 01 '13 at 00:47
Okay, great. I get it. Thank you both. – pmac89 May 01 '13 at 01:04

JSON data and functions

2 Answers2