javascript - 将字符串从函数传递到变量 Javascript

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部分还没有执行完全，因此不会有任何返回值。

您可以做两件事:

1 - 使用回调

A callback function is executed after the current effect is finished.

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 使用 Promise(相对于回调，我更喜欢这个)

因此，一旦事情变得非常有趣并且您仍在使用回调，您可以轻松进入 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 Fiddle。 https://jsfiddle.net/ggderas/67f7p2rb/1/