Bryan Liebold Bryan Liebold - 6 months ago 22
Javascript Question

Trying to get the JavaScript variable scope correct in this trello.get code

I have been struggling to set the variable 'listName' scope correct in this code ...

var loadedAtriskopps = function(opps) {
var listName = 'empty';
$.each(opps.cards, function(index, opp) {
Trello.get(
'/cards/' + opp.id + '/list?fields=name', {fields: "id, name"}, function(list, err) {
var listName = list.name;
console.log(listName); //this returns the correct value
});
console.log(listName); //this returns 'empty'
var opp = $("<div class='row'><div class='col-xs-6'><p class='output'>" + opp.name + "</b><br>On List: " + listName + " </p></div> </div>");
$('#opps').append(opp)
});
};


Inside the Trello.get function it returns correctly, but not outside of it. After hours of research, still cannot get it right.




UPDATE:

Per the recommendation, tried this code:

var loadedAtriskopps = function(opps) {
var listName = 'empty';
$.each(opps.cards, function(index, opp) {
console.log(opp.name); // returns correct value
Trello.get('/cards/' + opp.id + '/list?fields=name', {fields: "id, name"})
.success(function(list) {
listName = list.name;
console.log(listName); // // returns correct value
// next line errors "Uncaught TypeError: Cannot read property 'name' of undefined" but listName is correct
var opp = $("<div class='row'><div class='col-xs-6'><p class='output'>" + opp.name + "</b><br>On List: " + listName + " </p></div> </div>");
$('#opps').append(opp);
})
.error(function(err) {
console.log("An error: " + err);
});
});
};


Seems I have lost definition for the
opp
object with in the success callback.




SOLUTION:

var loadedAtriskopps = function(opps) {
var listName = 'empty';
$.each(opps.cards, function(index, opp) {
Trello.get('/cards/' + opp.id + '/list?fields=name', {fields: "id, name"})
.success(function(list) {
listName = list.name;
var card = $("<div class='row'><div class='col-xs-6'><p class='output'>" + opp.name + "</b><br>On List: " + listName + " </p></div> </div>");
$('#opps').append(card);
})
.error(function(err) {
console.log("An error: " + err);
});
});
};


Thank you Darren and Andy!

Answer

I believe you need to move your post-ajax operations into a success callback. This should ensure you have the actual value after the ajax has the value of listName.

var loadedAtriskopps = function(opps) {
    var listName = 'empty';
    $.each(opps.cards, function(index, opp) {
        Trello.get('/cards/' + opp.id + '/list?fields=name', {fields: "id, name"})
              .success(function(list) {
                listName = list.name;
                console.log(listName); // should return correct value
                var opp = $("<div class='row'><div class='col-xs-6'><p class='output'>" + opp.name + "</b><br>On List: " + listName + " </p></div>    </div>");
                $('#opps').append(opp);
              })
              .error(function(err) {
                console.log("An error: " + err);
              });
    });
};