Question

我有一个函数，我试图传递一个字符串来创建一个新变量 - 见下文：

function networks(networkGroupId) {
    jQuery.ajax({
        type: 'GET'
        , url: apiURL + 'api/v4/networkGroups/' + networkGroupId + '/countries?count=500'
        , dataType: 'json'
        , success: function (networkGroup) {
            var regionList = []; // temporary array
            jQuery.each(networkGroup.countryList, function (i, countryList) {
                regionList.push( countryList.code + ": 'NORTH AMERICA'")
            });
            var regionListOutput = '{' + regionList + '}';
            console.log(regionListOutput);
        }
    });
};

var networkList = networks('15001');
console.log('Network List = ' + networkList);

我遇到的问题是，当我运行这个时，我得到一个

的控制台输出

Network List = undefined

{AG: 'NORTH AMERICA',AI: 'NORTH AMERICA',AR: 'NORTH AMERICA',AW: 'NORTH AMERICA',BB: 'NORTH AMERICA',BM: 'NORTH AMERICA',BO: 'NORTH AMERICA',BR: 'NORTH AMERICA',CL: 'NORTH AMERICA',CO: 'NORTH AMERICA',CR: 'NORTH AMERICA',CW: 'NORTH AMERICA',DM: 'NORTH AMERICA',DO: 'NORTH AMERICA',EC: 'NORTH AMERICA',GD: 'NORTH AMERICA',GF: 'NORTH AMERICA',GT: 'NORTH AMERICA',HT: 'NORTH AMERICA',JM: 'NORTH AMERICA',KN: 'NORTH AMERICA',KY: 'NORTH AMERICA',LC: 'NORTH AMERICA',PA: 'NORTH AMERICA',PE: 'NORTH AMERICA',PY: 'NORTH AMERICA',TC: 'NORTH AMERICA',TT: 'NORTH AMERICA',UY: 'NORTH AMERICA',VC: 'NORTH AMERICA',VE: 'NORTH AMERICA',VG: 'NORTH AMERICA',MQ: 'NORTH AMERICA',GP: 'NORTH AMERICA',SV: 'NORTH AMERICA',HN: 'NORTH AMERICA',NI: 'NORTH AMERICA',BS: 'NORTH AMERICA',BZ: 'NORTH AMERICA',GY: 'NORTH AMERICA',MF: 'NORTH AMERICA',MS: 'NORTH AMERICA',SR: 'NORTH AMERICA',BQ: 'NORTH AMERICA',BL: 'NORTH AMERICA',SX: 'NORTH AMERICA'}

当我真的希望两个日志都是字符串{...}

时

我想我明白networkList作为未定义返回，因为它不等待networks('15001')的结果，但我不知道如何纠正这个问题。有人可以帮忙吗？

修改

为了进一步添加一些说明，在将networkList的变量设置为字符串{AG: 'NORTH AMERICA',AI: 'NORTH AMERICA'...}后，我想将其传递给变量regionStyling，如下所示（控制台日志仅供我检查）传递正确的字符串）：

function networks(networkGroupId, callback) {
        jQuery.ajax({
            type: 'GET'
            , url: apiURL + 'api/v4/networkGroups/' + networkGroupId + '/countries?count=500'
            , dataType: 'json'
            , success: function (networkGroup) {
                var regionList = []; // temporary array
                jQuery.each(networkGroup.countryList, function (i, countryList) {
                    regionList.push(countryList.code + ": 'NORTH AMERICA'")
                });
                var regionListOutput = '{' + regionList + '}';
                console.log(regionListOutput);
                callback(regionListOutput);
            }
        });
    };
    var networkList = [];
    networks('15001', function (regionListGottenFromTheNetworksFunction) {
        networkList = regionListGottenFromTheNetworksFunction;
        console.log('Network List = ' + networkList);
    });

    console.log(networkList);


    var regionStyling = {
        regions: [{
            values: networkList //this should be the string {AG: 'NORTH AMERICA',AI:...}
            , scale: {
                "NORTH AMERICA": "#2761ad"
                , "EUROPE": "#d58aa3"
                , "ASIA": "#ee549f"
                , "LATIN AMERICA": "#15bbba"
                , "AFRICA & MIDDLE EAST": "#8864ab"
            }
     }]
    };`

Answer 1

欢迎来到异步世界！

首先，你没有在方法中返回任何内容。然后，该方法内部发生的事情是异步的，这意味着它可能需要一段时间基于很多事情，另一方面，以下几行是一个接一个：

var networkList = networks（'15001'）;

console.log（'Network List ='+ networkList）;

所以同时这两行正在被执行，也许AJAX paart没有被完全执行，因此不会返回任何值。

您可以做两件事：

1 - 使用回调

在当前效果结束后执行回调函数。

function networks(networkGroupId, callback) {
    jQuery.ajax({
        type: 'GET'
        , url: apiURL + 'api/v4/networkGroups/' + networkGroupId + '/countries?count=500'
        , dataType: 'json'
        , success: function (networkGroup) {
            var regionList = []; // temporary array
            var regionListOutput = '{';

                jQuery.each(networkGroup.countryList, function (i, countryList) {
                    regionList.push( countryList.code + ": 'NORTH AMERICA'");
                    regionListOutput += countryList.code + ":'NORTH AMERICA',";
                });

                regionListOutput = regionListOutput.replace(/,\s*$/, ""); //Remove last comma
                regionListOutput += "}";

            callback(regionListOutput);
        }
    });
};

var networkList = [];
networks('15001', function(regionListString){
    networkList = regionListString;
    console.log('Network List = ' + networkList);
});

2使用Promises（我更喜欢回调）

因此，一旦事情变得非常有趣并且您仍在使用回调，您可以轻松进入Callback hell

function networks(networkGroupId, callback) {
    return new Promise(function(resolve, reject){
        jQuery.ajax({
            type: 'GET'
            , url: apiURL + 'api/v4/networkGroups/' + networkGroupId + '/countries?count=500'
            , dataType: 'json'
            , success: function (networkGroup) {
                var regionList = []; // temporary array
                var regionListOutput = '{';

                jQuery.each(networkGroup.countryList, function (i, countryList) {
                    regionList.push( countryList.code + ": 'NORTH AMERICA'");
                    regionListOutput += countryList.code + ":'NORTH AMERICA',";
                });

                regionListOutput = regionListOutput.replace(/,\s*$/, ""); //Remove last comma
                regionListOutput += "}";

                resolve(regionListOutput);
            }
        });     
    })

};

var networkList; 
networks('15001').then(function(regionListString){
    networkList = regionListString;
})

抛开异步部分，你在这里想要实现的目标实际上并没有多大意义：

var regionListOutput ='{'+ regionList +'}';

因为你要连接字符串和数组。你需要做的是在你已经拥有的foreach循环中连接这个连接部分。我编辑了两种方法。

这是你可以测试的JS小提琴。 https://jsfiddle.net/ggderas/67f7p2rb/1/

将字符串从函数传递给变量Javascript

1 个答案: