AngularJS中数组存在实际值却提示Array is undefined如何解决

你遇到的是JavaScript异步执行的经典场景：代码中调用的两个服务API都是异步请求，写在最外层的console.log(radaList[0])会在API请求回调触发前就执行，此时radaList还未被填充数据，因此取第0位为undefined。
你打印完整数组能看到值是浏览器控制台的引用特性：你手动展开数组时，异步回调已经执行完成、数组已经被填充，这属于控制台的展示特性，和实际代码执行顺序不一致。

因为存在多个并行的listForRadaGroup异步请求，推荐使用AngularJS内置的$q服务做异步聚合，等待所有请求全部完成后再操作radaList：

1. 首先在你当前的控制器/服务中依赖注入$q
2. 改造代码如下：

let promiseList = [];
UserRolesService.api.getUserRadaGroups({userLogin: $scope.selectedUserObj.login}, function(a) {
    _.each(a.radaGroups, function(c) {
        // 把每个异步请求包装为Promise存入列表
        let reqPromise = $q(function(resolve) {
            AuthorityRolesService.api.listForRadaGroup({radaGroup: c}, function(b) {
                let roleNames = [];
                for(var i =0; i<b.length;i++){
                    console.log(b[i].roleName);
                    roleNames.push(b[i].roleName);
                }
                resolve(roleNames);
            });
        });
        promiseList.push(reqPromise);
    });

    // 等待所有异步请求执行完成
    $q.all(promiseList).then(function(allResult) {
        // 合并所有请求返回的角色数组
        let radaList = [].concat.apply([], allResult);
        // 此处操作radaList即可拿到正确值
        console.log(radaList[0]);
        // 所有依赖radaList的后续逻辑都要写在此回调内
    })
});

如果你的服务API本身已经支持返回Promise，不需要手动包装$q，可以直接使用接口返回的Promise实例，代码会更简洁。

如果仅为临时调试场景，也可以用延时打印的方式验证结果，生产环境不推荐使用：

setTimeout(function() {
    console.log(radaList[0]);
}, 1000);

内容的提问来源于stack exchange，提问作者vdvaart