Hastig Zusammenstellen Hastig Zusammenstellen -4 years ago 30
Javascript Question

How to return a variable from a callback after building variable with .getjson and .each

The Problem

I'm trying to figure out how to return HTML that I've built from a JSON file with jQuery.

I seem to have gotten

returnLocations()
to wait until
getLocations()
is finished so that the variable
locationsBody
is finalized with information gathered from my
.each
loop. The trouble (I think) is my not being able to return that variable to output it to my HTML page.

The Question

How can I return the variable
locationsBody
?

Note

(there may be errors in the below code as I trimmed it down as best I could but I think it should illustrate the problem with or without them)

The jQuery

the global variables

var locationsFull = 'un d fined';
var locationsOpener = '' +
'<div class="locations-header">places youve been</div>' +
'<div class="locations-container">' +
'<div class="locations-nav left">left</div>' +
'<div class="locations-nav right">right</div>'
;
var locationsBody = '<div class="locations-inner">'; // opening of container
var locationsCloser = '</div>'; // closing of container


the function

function locationsFunction() {
function getLocations() {
var wait = $.Deferred();
var area = 'Area1';
var counter = 1;
$.getJSON("locations.json", function(data) {
$(data.places).each(function() {
var location = this.location;
var image = this.image;
if (this.area === 'Area1') {
if (counter == 2) {
locationsBody = locationsBody +
'<div class="locations-places">' +
'<img src="images/places/' + image + '">' +
'<div class="locations-places-image">' + location + '</div>' +
'</div></div>'
;
counter = 0; // added closing of container, reset to 0
} else {
locationsBody = locationsBody +
'<div class="locations-places">' +
'<img src="images/places/' + image + '">' +
'<div class="locations-places-image">' + location + '</div>' +
'</div>'
;
counter = counter + 1;
}
}
})
wait.resolve();
})
return wait;
}
function returnLocations() {
locationsFull = locationsOpener + locationsBody + locationsCloser; // works, proven in alert and console.log
//alert(locationsFull); // works
console.log(locationsFull); // works
//return locationsFull; // doesnt work
//return 'anything'; // doesnt work
}
getLocations().then(returnLocations);
}


the call

$(function() {
$('.locations-body').html(locationsFunction());
})


The JSON File

{"places":[
{
"area": "Area1",
"location": "Downtown",
"image": "downtown.jpg"
},
{
"area": "Area1",
"location": "Uptown",
"image": "uptown.jpg"
}
]}


The HTML

<div class="locations-body"></div>


Further Note: Questions similar to this have been asked dozens of times on stackoverflow alone and those questions and answers have hundreds of thousands of reads. I have read through all of the top ones and more over the last 2 days. My problem is my inability to thoroughly understand the answers and apply them to my exact situation as seems to be the problem of the dozens (hundreds/thousands?) of people asking these questions and the hundreds of thousands (millions?) of people that have been searching for solutions to asynchronous problems.

Answer Source

You could just call .html() inside the returnLocations() function if that's viable.

the function

function returnLocations() {
    locationsFull = locationsOpener + locationsBody + locationsCloser;
    $('.locations-body').html(locationsFull);
}

the call

$(function() {
    locationsFunction();
}

Otherwise you'll need to look into callbacks, read this, if you need to do it this way I can update my answer with an example later on.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download