What is the best way to iterate through a multi-dimensional array and only load a single section at a time? - Using JavaScript

Question

What is the best way to iterate through a multi-dimensional array and only load a single section at a time? - Using JavaScript

I have a massive multidimensional JavaScript array object that stores coordinates of numerous earthquakes.

Here is an example:

var earthquakeArray = [
            [
            0 : {
              "place": "home",
              "lat": "30",
              "lng": "40"
              },
            //...//
            400 : {
              "place": "home",
              "lat": "30",
              "lng": "40"
              }
            ],
           [
            0 : {
              "place": "home",
              "lat": "30",
              "lng": "40"
              },
            //...//
            400 : {
              "place": "home",
              "lat": "30",
              "lng": "40"
              }
            ]
           ];

Each "array container" contains 400 earthquake records. The entire array can include more than 120,000 earthquakes...

Displaying all this data on Google Maps takes a long time, so I attempted to show the earthquakes in each "array container" (every 400) one by one.

I tried looping through the array like this:

 for(var f= 0; f < earthquakeArray.length; f++){   
    for(var i= 0; i < earthquakeArray[f].length; i++){ 
     //add earthquakes/markers on Google Maps
    }
 }

However, there doesn't seem to be a progressive loading action, as all earthquakes in the array load at once. This results in a lengthy waiting time for users....

Do you have any suggestions on how to address this issue?

Could using AJAX help resolve this problem?

javascript arrays ajax performance loading

Answer 1

Answer №1

To enhance filter control, consider creating a function specifically for this purpose. I have made updates to JSFiddle showcasing a potential solution. One approach is to implement a function like filterTurma() as demonstrated below:

$scope.filterTurma = function(user) {

// If the selected value is '!!' (meaning 'Everyone'), 
// simply return 'true' to display all cases...
if ($scope.search_turma.turmas.value == '!!')
return true;

// Otherwise, iterate through the user's classes and check if at least
// one matches an advanced class in the combobox...
for (var i = 0; i < user.turma.length; i++) {
var turma = user.turmas[i];
if (turma.value == $scope.search_turma.turma.value)
return true;
}

// If no match is found, return 'false' to hide this user...
return false;
};

In essence, your combo box contains various classes including an option labelled "Everyone" with the value '!!'. The logic of the filter function checks if the current item's value aligns with the selected class in the combobox or if any of the user's classes correspond to it. To apply this filtering in your HTML, utilize the following syntax:

tr ng-repeat="user in dataUserAndTurma | filter: {name: search_nome} | filter: filterTurma"

Notice that the method name does not include parentheses (AngularJS automatically passes the current user iteration to the method). Furthermore, the original filter is retained, ensuring both filters work in tandem.

Answer 2

To enhance filter control, consider creating a function specifically for this purpose. I have made updates to JSFiddle showcasing a potential solution. One approach is to implement a function like filterTurma() as demonstrated below:

$scope.filterTurma = function(user) {

// If the selected value is '!!' (meaning 'Everyone'), 
// simply return 'true' to display all cases...
if ($scope.search_turma.turmas.value == '!!')
return true;

// Otherwise, iterate through the user's classes and check if at least
// one matches an advanced class in the combobox...
for (var i = 0; i < user.turma.length; i++) {
var turma = user.turmas[i];
if (turma.value == $scope.search_turma.turma.value)
return true;
}

// If no match is found, return 'false' to hide this user...
return false;
};

In essence, your combo box contains various classes including an option labelled "Everyone" with the value '!!'. The logic of the filter function checks if the current item's value aligns with the selected class in the combobox or if any of the user's classes correspond to it. To apply this filtering in your HTML, utilize the following syntax:

tr ng-repeat="user in dataUserAndTurma | filter: {name: search_nome} | filter: filterTurma"

Notice that the method name does not include parentheses (AngularJS automatically passes the current user iteration to the method). Furthermore, the original filter is retained, ensuring both filters work in tandem.

What is the best way to iterate through a multi-dimensional array and only load a single section at a time? - Using JavaScript

Answer №1

Similar questions

Having an issue with both of my states being called simultaneously, resulting in a TypeError: Cannot read property 'map' of undefined

Encountered an error: Uncaught TypeError - Unable to access property 'active' as it is undefined within React code

Detect the initial collision exclusively (Collision detection using raycasting)

Executing JavaScript functions within Vue JS components

Utilizing the variable $this outside of an object context within an Ajax function

How to remove the initial negative value present in an array using C#

Adjusting the height of a vertical slider in Vuetify2 is not customizable

Accessing several values in Angular by clicking

Exploring the Factory Design Pattern Together with Dependency Injection in Angular

What Are the Possible Use Cases for Template Engine in Angular 2?

PHP Brandwatch HTTP API Request

What coding techniques can be used to create dynamic animation of a log stream in javascript/css

Accessing error information from server side through AJAX request in C#

extract information from a document and store it in an array

Troubleshooting AJAX, PHP, and mySQL Interactions

Discovering duplicates for properties within an array of objects in React.js and assigning a sequential number to that specific field

transition from jQuery to Zepto

Subdomain for an Ajax request

Using Jquery to access Wcf service

Can Backbone be used to retrieve a local JSON file?