Executing a Javascript callback function within a forEach loop

Question

Executing a Javascript callback function within a forEach loop

Javascript:

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

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

    var arrayXCoords = [];
    var arrayYCoords = [];

    $.getJSON(systemsInfo, function(data) {

        data.forEach(function(sysData) {

            // Extract information and create elements for objects found in constellations list
            if(constellationsList.indexOf(sysData.constellation_id) > -1) {

                // Simplify location coordinates
                var xCoord = sysData.position.x / 100000000000000;
                var yCoord = sysData.position.y / 100000000000000;

                // Store coordinates in arrays
                arrayXCoords.push(xCoord);
                arrayYCoords.push(yCoord);

                // Get the lowest coordinate values
                var offsetXValue = Math.min.apply(Math, arrayXCoords);
                var offsetYValue = Math.min.apply(Math, arrayYCoords);

                // Set pixel offsets to center in the viewport
                var updatedCoordX = xCoord + offsetXValue;
                var updatedCoordY = yCoord + offsetYValue;

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

            }
        });       
    });

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

Functionality Explanation:

Iterates through a JSON object
Checks each object for matches containing the constellation_id
If match is found, adds coordinates to an array and stores the lowest coordinate values in variables
Creates an SVG element during each iteration

Challenge:

When creating the SVG elements, the CSS margins are set using coordX and coordY variables. I need to substitute these with the new offsetX and offsetY variables, but this doesn't work as the offsetX and offsetY values are not finalized yet due to the ongoing construction of arrayXCoords and arrayYCoords.

In essence, I have to establish the offsetX and offsetY variables first before proceeding with the SVG creation process.

javascript arrays loops

Answer 1

Answer №1

In order to improve efficiency, this iteration can be divided into two separate loops: one for preparing data required for rendering, and another for actually rendering the SVG elements. This approach aligns well with the standard practice of separating rendering from state updates seen in frameworks like Flux and React, making it easier to transition to those systems in the future.

To earn extra points, consider avoiding the use of forEach and opting for functions without side effects. The library immutable.js is highly recommended for its functional-style utilities, immutable data structures, and support for equality checks (which are essential when using containers such as Lists and Maps).

Furthermore, I suggest switching to the use of let and const syntax, as well as incorporating arrow functions for improved code readability and efficiency.

Answer 2

In order to improve efficiency, this iteration can be divided into two separate loops: one for preparing data required for rendering, and another for actually rendering the SVG elements. This approach aligns well with the standard practice of separating rendering from state updates seen in frameworks like Flux and React, making it easier to transition to those systems in the future.

To earn extra points, consider avoiding the use of forEach and opting for functions without side effects. The library immutable.js is highly recommended for its functional-style utilities, immutable data structures, and support for equality checks (which are essential when using containers such as Lists and Maps).

Furthermore, I suggest switching to the use of let and const syntax, as well as incorporating arrow functions for improved code readability and efficiency.

Answer 3

Answer №2

Here is an example of how you can create the function using Array#filter, Array#map, a Set, spread syntax, arrow functions, and incorporating some jQuery for DOM manipulation:

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

    $.getJSON(systemsData, function(data) {
        data = data.filter(sysData => importantConstellations.has(sysData.constellation_id));

        const xCoordValues = data.map(sysData => sysData.position.x / 100000000000000);
        const yCoordValues = data.map(sysData => sysData.position.y / 100000000000000);

        const offsetX = Math.min(...xCoordValues);
        const offsetY = Math.min(...yCoordValues);

        $('#container').append(
            data.map((sysData, i) => {
                const coordX = xCoordValues[i] + offsetX;
                const coordY = yCoordValues[i] + offsetY;

                const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                svgElement.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");

                return $(svgElement).attr({
                    id: sysData.name,
                    title: sysData.name,
                    "constellation-id": sysData.constellation_id,
                    "class": "system"
                }).css({ 
                    marginTop: coordY, 
                    marginLeft: coordX 
                });
            })
        );
    });

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

Answer 4

Here is an example of how you can create the function using Array#filter, Array#map, a Set, spread syntax, arrow functions, and incorporating some jQuery for DOM manipulation:

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

    $.getJSON(systemsData, function(data) {
        data = data.filter(sysData => importantConstellations.has(sysData.constellation_id));

        const xCoordValues = data.map(sysData => sysData.position.x / 100000000000000);
        const yCoordValues = data.map(sysData => sysData.position.y / 100000000000000);

        const offsetX = Math.min(...xCoordValues);
        const offsetY = Math.min(...yCoordValues);

        $('#container').append(
            data.map((sysData, i) => {
                const coordX = xCoordValues[i] + offsetX;
                const coordY = yCoordValues[i] + offsetY;

                const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                svgElement.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");

                return $(svgElement).attr({
                    id: sysData.name,
                    title: sysData.name,
                    "constellation-id": sysData.constellation_id,
                    "class": "system"
                }).css({ 
                    marginTop: coordY, 
                    marginLeft: coordX 
                });
            })
        );
    });

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

Executing a Javascript callback function within a forEach loop

Answer №1

Answer №2

Similar questions

Creating a Javascript countdown timer that does not involve displaying the

The mobile-responsive dropdown navigation bar functions well on browsers with small widths, but does not work properly on my phone

Implementing autocompletion in an ASP.NET MVC4 application with AJAX and jQuery

Insert two backslashes before a single backslash in PHP

Javascript code for populating multiple objects with new items using a nested for loop

After the completion of the JavaScript timer, the existing text remains in place even when the new text is displayed

Unable to adjust the border radius of a filled text-field variant in Material-ui-core

Refreshing div content based on dropdown selection without reloading the page

Having trouble transforming my JSON file into a JavaScript object

Slider Troubles - Strange glitch when reaching final slide

The error message "TypeError: event.preventDefault is not a function when using Formcarry with React Hook Form" is

What could be causing certain javascript functions to not work properly?

Can the DOM be automatically refreshed after a set period of time without requiring any user input or triggers?

Automatic capitalization feature for input fields implemented with AngularJS

Challenges arise when trying to import GLTFLoaders in THREE.js

The issue arises when attempting to update the input of a child component within a reactive form during the OnInit lifecycle

Experiencing a lack of defined or no outcome when outputting the API callback

Look into the data with vue.js, but there's not much

What is the best way to show a table with 100% width in the Chrome browser?

Issue with the Styled Components Color Picker display