forEach中的JavaScript回调

Question

Javascript:

$(document).ready(function() {
    var systems = 'https://raw.githubusercontent.com/joeberthelot88/EVE-Online-Mapper/master/eveSystems.json?token=AWUj7mQ8T_6NBaRgIcz4Xz0KQd1SazMUks5ZjpeAwA%3D%3D';

    var constellations = [20000441, 20000442, 20000443, 20000444, 20000445, 20000446, 20000447];

    var arrayX = [];
    var arrayY = [];

    $.getJSON(systems, function(data) {

        data.forEach(function(systemData) {

            // Get data and build elements for each object found in constellations array
            if(constellations.indexOf(systemData.constellation_id) > -1) {

                // Simplify location coordinates
                var x = systemData.position.x / 100000000000000;
                var y = systemData.position.y / 100000000000000;

                // Push coordinates to arrays
                arrayX.push(x);
                arrayY.push(y);

                // Get the lowest coordinate values
                var offsetX = Math.min.apply(Math, arrayX);
                var offsetY = Math.min.apply(Math, arrayY);

                // Set pixel offsets to center in the viewport
                var coordX = x + offsetX;
                var coordY = y + offsetY;

                // Build SVG elements
                var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                svg.setAttribute('id', systemData.name);
                svg.setAttribute('title', systemData.name);
                svg.setAttribute('class', 'system');
                svg.setAttribute('constellation-id', systemData.constellation_id);
                svg.setAttribute('style', 'margin-top:'+coordY+'px;margin-left:'+coordX+'px');
                svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
                document.getElementById('container').appendChild(svg);
            } else {

            }
        });       
    });

    $(this.body).panzoom();
});

What this does:

• Loops through a JSON object
• For each object, it looks for matches where the object contains the constellation_id
• If a match is found, it pushes the coordinates to an array and then the lowest number from each array gets stored as a variable
• During each loop, an SVG element is created

Issue:

During creation of the SVG elements, I'm setting CSS margins with the coordX and coordY variables. Instead, I need to swap those variables out with the new offsetX and offsetY ones, however this doesn't work because the offsetX and offsetY variables aren't at their final state due the arrayX and arrayY arrays still being built.

Basically, I need to build the offsetX and offsetY variables and THEN run the SVG creation.

Answer 1

This iteration can be split into two loops, first one is to build up all necessary for rendering data, and then the svg rendering loop itself. Such split goes well along with idiomatic separation of rendering and state update that could be found in Flux / React, which might make it easier later to switch to them or similar frameworks.

Bonus points, if you can avoid forEach and use functions without side effects. I would recommend immutable.js , as it provides many useful functional-style utilities and provides immutable data structures, and equality check (and use as a key) for containers (Lists, Maps, etc).

Also, on a side note, I would recommend to switch to let and const syntax and use arrow functions.

Answer 2

You could write the function like this, making use of Array#filter , Array#map , a Set , spread syntax, arrow functions, and more of jQuery for the DOM manipulation:

$(function() {
    const systems = 'https://raw.githubusercontent.com/joeberthelot88/EVE-Online-Mapper/master/eveSystems.json?token=AWUj7mQ8T_6NBaRgIcz4Xz0KQd1SazMUks5ZjpeAwA%3D%3D';
    // Use a Set for faster look-up
    const constellations = new Set([20000441, 20000442, 20000443, 20000444, 20000445, 20000446, 20000447]);

    $.getJSON(systems, function(data) {
        data = data.filter(systemData => constellations.has(systemData.constellation_id));
        // Collect the coordinate values
        const arrayX = data.map(systemData => systemData.position.x / 100000000000000);
        const arrayY = data.map(systemData => systemData.position.y / 100000000000000);
        // Get least coordinate values
        const offsetX = Math.min(...arrayX);
        const offsetY = Math.min(...arrayY);
        $('#container').append( // Append array of elements in one go 
            data.map((systemData, i) => {
                // Set pixel offsets to center in the viewport
                const coordX = arrayX[i] + offsetX;
                const coordY = arrayY[i] + offsetY;
                // Build SVG elements
                const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
                return $(svg).attr({
                    id: systemData.name,
                    title: systemData.name,
                    "constellation-id": systemData.constellation_id,
                    "class": "system"
                }).css({ 
                    marginTop: coordY, 
                    marginLeft: coordX 
                });
            })
        );
    });

    $(this.body).panzoom();
});