如何确保在运行所有其他代码之前创建一个数组？答案

【问题标题】：How do I make sure an array is made before all other code is ran?如何确保在运行所有其他代码之前创建一个数组？
【发布时间】：2017-01-30 23:24:11
【问题描述】：

我遇到的问题是，当我在数组上调用 .map 时，我正在使用它返回“未定义”，但是当我在 .map 调用之前记录数组的内容时，它说数组不是未定义。

    $(document).ready(function(){
    var key = [];
    d3.xml("data.xml", function(error, data) {
        if (error) throw error;
        data = [].map.call(data.querySelectorAll("Names"), function(suspect) {
            return {
                name: suspect.querySelector("name").textContent
            }
        });
        for (var y = 0; y < data.length; y++) {
            key = Object.values(data[y]);
            LegendOptions[y] = key[0];
        };
    });

    var str1 = [null,null,null];
    var cntr = 0;
    d3.xml("data.xml", function(error, data) {
        if (error) throw error;
        data = [].map.call(data.querySelectorAll("element"), function(suspect) {
            return {
                axis: suspect.getAttribute("id"),
                value: +suspect.querySelector("value").textContent
            }
        });
        for (var y = 0; y < LegendOptions.length; y++) {
            str1 = [null,null,null]
            for (var i = 0; i < data.length/LegendOptions.length; i++) {
                str1[i] = data[cntr];
                cntr++;
            };
            d[y] = str1;
        };
    });
});
        var RadarChart = {
            draw: function(id, d, options){
                var cfg = {
                    radius: 5,
                    w: 600,
                    h: 600,
                    factor: 1,
                    factorLegend: .85,
                    levels: 3,
                    maxValue: 0,
                    radians: 2 * Math.PI,
                    opacityArea: 0.5,
                    ToRight: 5,
                    TranslateX: 80,
                    TranslateY: 30,
                    ExtraWidthX: 100,
                    ExtraWidthY: 100,
                    color: d3.scale.category10()
                };

                if('undefined' !== typeof options){
                    for(var i in options){
                        if('undefined' !== typeof options[i]){
                            cfg[i] = options[i];
                        }
                    }
                }
                cfg.maxValue = Math.max(cfg.maxValue, d3.max(d, function(i){return d3.max(i.map(function(o){return o.value;}))}));
                console.log(d);
                var allAxis = (d[0].map(function(i, j){return i.axis}));

最后一行是 .map 被调用的地方以及我得到未定义错误的地方。此外，数组 'd' 存储在不同的文档中，稍后在 html 文件中调用该文档。

    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
            <title>Radar chart</title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="RadarChart.js"></script>
    <style>
    body {
        overflow: hidden;
        margin: 0;
        font-size: 18px;
        font-family: "Helvetica Neue", Helvetica;
    }

    #chart {
        position: absolute;
        top: 200px;
        left: 100px;
    }   
    </style>
</head>
<body>
    <div id="body">
        <div id="chart"></div>
    </div>
    <div data-role="fieldcontain" class="ui-hide-label" id="langDiv"></div>
    <script type="text/javascript" src="script.js"></script>

</body>
</form>
</html>

RadarChart.js 是引发错误的文件以及调用 .map 的位置。

【问题讨论】：

所以，d 是一个数组...但是d[0] 和数组是什么？
还有这一行 d[y] = str1; 你有一个名为 d 的全局变量吗？
d 是全局变量，d[0] 是数组
所以，console.log(Array.isArray(d[0])) 你有console.log(d) 输出true？
不，它输出 false 但是据我所知，d[0] 处有一个数组。

标签： javascript jquery d3.js

【解决方案1】：

等待d 填充的一种可能解决方案是使用 Promise 进行异步加载

在下文中，我将这两个d3.xml() 结合起来，因为这对我来说似乎很有意义！

var dataLoaded = new Promise(function(resolve, reject) {
    $(document).ready(function() {
        var tdata = [];
        var cntr = 0;
        d3.xml("data.xml", function(error, data) {
            if (error) {
                reject(error);
            }
            //
            [].forEach.call(data.querySelectorAll("Names"), function(suspect) {
                return {
                    name: suspect.querySelector("name").textContent
                }
            }).forEach(function(item) {
                var key = Object.values(item);
                LegendOptions[y] = key[0];
            };
            //
            var tdata = [].map.call(data.querySelectorAll("element"), function(suspect) {
                return {
                    axis: suspect.getAttribute("id"),
                    value: +suspect.querySelector("value").textContent
                }
            });
            LegendOptions.forEach(function() {
                var str1 = [null, null, null];
                for (var i = 0; i < tdata.length / LegendOptions.length; i++) {
                    str1[i] = tdata[cntr];
                    cntr++;
                };
                d[y] = str1;
            });
            //
            resolve(d);
        });
    });
});

var RadarChart = {
    draw: function(id, d, options) {
        dataLoaded.then(function() {
            var cfg = {
                radius: 5,
                w: 600,
                h: 600,
                factor: 1,
                factorLegend: .85,
                levels: 3,
                maxValue: 0,
                radians: 2 * Math.PI,
                opacityArea: 0.5,
                ToRight: 5,
                TranslateX: 80,
                TranslateY: 30,
                ExtraWidthX: 100,
                ExtraWidthY: 100,
                color: d3.scale.category10()
            };

            if ('undefined' !== typeof options) {
                for (var i in options) {
                    if ('undefined' !== typeof options[i]) {
                        cfg[i] = options[i];
                    }
                }
            }
            cfg.maxValue = Math.max(cfg.maxValue, d3.max(d, function(i) {
                return d3.max(i.map(function(o) {
                    return o.value;
                }))
            }));
            console.log(d);
            var allAxis = (d[0].map(function(i, j) {
                return i.axis
            }));
            //... you didn't post any more than this
        });
    }
}

【讨论】：

我对你感激不尽。这个问题困扰我很久了，你能抽出时间来帮助我真是太好了。稍加修改，我就能完全实现它。