尝试在此trello.get代码中正确获取JavaScript变量范围

Question

我一直在努力在此代码中设置变量'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"}, 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)
    });
};

在Trello.get函数内部，它可以正确返回，但不在其外部。 经过数小时的研究，仍然无法解决问题。

---

更新：

根据建议，尝试以下代码：

 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);
              });
    });
};

似乎我在成功回调中丢失了opp对象的定义。

---

解：

 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);
              });
    });
};

谢谢达伦和安迪！

Answer 1

我相信您需要将后ajax操作转移到成功回调中。 这应该确保ajax具有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);
              });
    });
};