0

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.

Improve this question

2 Answers 2

Reset to default
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()

});
}
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

So if I want to save the jsonData to a variable and return it, how would I do so?
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?
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);
Though it doesn't work when I removed the promise code below.
Though I don't understand what done and fail are this is passing functions in parameters list of other functions.
|
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

Improve this answer

7 Comments

But then how do I access the data that the promise has?
The data is the first parameter passed into the done function. See the console.log(data); statement.
So do I have to keep the data inside that function? There's no way for me to use the data outside the function?
I've edited the answer to show how you can assign it to a variable outside that function
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?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.