从函数传递字符串变量的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 =网络（“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使用的承诺（我喜欢这种过度回调）

所以一旦事情变得真的很有趣，你还在使用回调，你可以很容易地进入一个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/