iterating over a large multidimensional array in JavaScript

I am facing a challenge with handling a large JSON dataset (around 20k+ entries, totaling over 2mb) that I need to display on my web pages.

Currently, I fetch this data using AJAX and parse it using JSON.parse in JavaScript, resulting in a complex multidimensional array. Then, I utilize DefiantJS (a JS library for JSON) along with some filters to search for specific values. Finally, I loop through the data to present it in tables. However, due to the size of the data, the page often becomes unresponsive.

The data represents a sales report.

My question is: Is there a more efficient way to handle this process without relying on for loops to avoid crashing the page each time? Should I consider using forEach for improved performance?

[EDIT]

Every evening, I export the sales data from my application into a JSON format, averaging about 100+ entries per day. Now, I aim to generate a comprehensive sales report based on this JSON data. The administrator will specify the date range (which could span over one or two months, etc.), yielding a substantial amount of data daily.

Data Sample: (approximately 2k+ entries in one month, all following the same structure)

{
"nojual": "1-00043",
"tgl": 1452038400,
"pelanggan_id": "guest",
"tgltempo": "0000-00-00",
"pay": "cash",
"sales_id": "",
"sisa": "0",
"po": "V5",
"iduser": "riny",
"modedisc": "P",
"total_qty": "4",
"kas": "o",
"sync": "N",
"last_update": "2016-01-06 12:30:54",
"nofaktur": "19",
"service_charge": "0",
"mode_service_charge": "P",
"pb2": "0",
"detail_pay": "",
"diskon_detail_pay": "0",
"tipe_diskon_detail_pay": "",
"ket_diskon": "",
"subtotal": "120000",
"disc": "0",
"pajak": "10",
"grandtotal": "132000",
"nojd": "89",
"barang_id": "20",
"jlhbrg": "2",
"hrgjual": "15000",
"reture": "0",
"tjddisc": "0",
"expired": "0000-00-00",
"total": "30000",
"tjdiduser": "riny",
"tjdmodedisc": null,
"qty": "0",
"satuan": "",
"gudang_id": "",
"id_option": "",
"sp": "tawar",
"tjdsync": "N",
"tjdlast_update": "2016-01-06 12:30:54",
"waiters": "astuti",
"nama_barang": "ice tea",
"jenis": "Minuman"
 }
javascriptarraysjsonmultidimensional-array

Answer №1

If your intention is to display content in a grid format with paging or infinite scrolling, you may want to explore the features offered by https://www.ag-grid.com/example.php. This tool is particularly effective for handling large amounts of data.

Hopefully this information proves useful to you.

Answer №2

Instead of loading all the data at once in a large list, I highly suggest adjusting your architecture to load data in smaller chunks. You can decide on the size of each chunk, whether it's five rows or a hundred rows, but breaking it up will definitely improve the responsiveness of your page and reduce load and render times.

You can implement this by including prev and next links, as well as page number links like 1, 2, ..., 5 to allow users to easily navigate to different sections. To minimize page requests, you can use Javascript listeners on these pager links to load rows using AJAX instead of a complete page reload.

Alternatively, if you want to limit user clicks, you can set up Javascript listeners for scrolling and use AJAX to request additional rows as the user scrolls down, known as infinite scrolling.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Add integer to an array of strings

Currently, I am utilizing an autocomplete feature and aiming to save the IDs of the selected users. My goal is to store these IDs in a string array, ensuring that all values are unique with no duplicates. I have attempted to push and convert the values u ...

javascriptarraysangulartypescriptpush

Prevent unnecessary image resizing during parallax scrolling animation

Check out my demonstration where the image scaling results in the margin-top of the parallax wrapper being unable to dynamically adjust. Demonstration: http://jsfiddle.net/KsdeX/12/ .wrapper-parallax { margin-top: 150px; margin-bottom: 60px; } W ...

javascripthtmlcssparallax

What could be causing my React child component to not update when changes are made to an array passed down in props after fetching new data?

My Profile.js component is responsible for fetching activity data related to a specific user from the URL parameter and updating the profileActivity state. This state is then passed down to my child component, ProfileActivity.js, where it should be display ...

javascriptreactjsfirebasegoogle-cloud-firestorereact-hooks

integrating a ui-bootstrap modal in a sidebar using angularjs

I recently utilized the modal example from https://angular-ui.github.io/bootstrap/ and everything worked perfectly. By using the code snippet below, I was able to successfully open the modal as shown in the example: $scope.open = function (size) { v ...

javascriptangularjstwitter-bootstrapbootstrap-modal

The function history.popstate seems to be malfunctioning, as it is triggered by both the forward and backward navigation buttons in

When I press the back button, I am attempting to retrieve the previous state. Upon inspecting, I noticed that the popstate function is also triggered by the forward button. However, it does not revert to the previous state even though the popstate function ...

javascripthtmlangularjshtml5-historyweb-frontend

Tips for selecting multiple potions from a JSON file in a React Native project

I need help with highlighting multiple options from an array in React Native. Currently, when I click on an option, it highlights that option but de-highlights the previous one. How can I modify my code to allow for selecting and highlighting multiple opti ...

javascriptreactjsarraysreact-native

What strategies can be used to effectively structure CSS and JavaScript in a project for optimal organization?

In my NetBeans project, I currently have a large web project with CSS files included in the header. Some CSS codes are needed on all pages, while others are only necessary for specific pages. I am looking to optimize high-traffic pages by removing any ...

javascriptcssreorganize

What is the purpose of implementing asynchronous loading for JavaScript in my webpack setup?

I am facing difficulties with handling unusual codes. I am trying to add some query parameters using $.ajaxPrefilter in all jQuery ajax requests. I came across the following code snippet which seems to ensure synchronous loading order, but in my entry.js ...

javascriptjqueryajaxwebpack

Not adhering to directive scope when transclusion is used, despite explicit instructions to do so

Trying to use a transcluding directive within another controller, but the inner scope isn't being redefined as expected. Despite trying different methods, I can't seem to figure out what's going wrong. The simplified code looks like this: ...

javascriptangularjs

Validating properties of a class using Typescript's Class-Validator

I tried using the class-validator decorator library for validation processes on my sample project. However, it doesn't seem to be working as expected. The sample project aims to create projects based on user inputs, and I'm attempting to validate ...

javascripttypescriptclass-validatortypescript-decorator

Harnessing the power of the bluebird promise library

Within myPeople function, there is a promise function being called as shown below: var myPeople = function(){ var go; return new Promise (function(resolve){ User .getPeople() .then(function(allPeople){ ...

javascriptnode.jspromisebluebird

The JSON node fails to return a value after inserting data through an ajax request

I'm encountering an issue with a jQuery plugin that loads JSON data through an AJAX call and inserts it into an existing object. When I attempt to reference the newly inserted nodes, they show up as 'undefined', despite the data appearing co ...

javascriptjqueryajaxjson

Display information from a Google Sheet onto a leaflet map based on specified categories

I am currently facing some challenges while creating a map with markers using data from Google Sheet and leaflet. Despite my efforts, I have encountered a few bugs that are proving to be difficult to resolve: Group Filtering - Although I can successfully ...

javascriptgoogle-apps-scriptgoogle-sheetsleaflet

The callback function fails to execute the click event following the .load() method

Hey there, I've hit a roadblock and could really use some help figuring out where I went wrong. Let me break down my script for you. On page1.html, I have a div that gets replaced by another div from page2.html using jQuery's .load() method. Here ...

javascriptjqueryhtmlcssajax

Understanding the scope of variables in a JavaScript callback function

I am attempting to send an object variable to a callback function const sql = require('mssql'); const asset_update = function (connection, addr) { this.connection = connection; this.addr = addr; this.addr_long = parseInt(addr, 16); } ...

javascriptnode.jscallback

The button's onclick function is failing to save the record in the database

Hello everyone, I am facing an issue with the ONCLICK button functionality. I have written code to save a form to the database. In the image, there are 2 buttons: Save button (type="submit") Save and New button (type="button") The Save button is ...

javascriptjqueryajaxspringjsp

Transforming unprocessed text into a regular string in the Rust programming language

I've been working on decoding raw bytes using base64::decode and I keep getting output that looks like {"foo":1,"bar":"first"}. However, serde_json requires the format to be { "foo":1, "bar":"first" } So, I am tasked with converting let raw = r#"{"fo ...

jsonrustserde

Leveraging Angular for Parsing JSON Data

I have a JSON object that I want to use in my code. The goal is to assign the values of certain properties from the JSON object to four variables in my Angular project. These variables are named as follows: authorText : string; titleText : string; duratio ...

jsonangular

Error: Unable to parse JSON field value due to an unexpected OBJECT_START

Currently in my coding project, I am utilizing node and mongoose to update a Watson rank and access the database. My goal is to insert multiple documents into the collection. While I can successfully add a single document, I encounter issues when creating ...

javascriptjsonnode.jsibm-watsonretrieve-and-rank

Make sure to update the package.json file at multiple locations following the execution of the "npm i" command

My goal is to automatically detect any newly installed packages based on my package.json file. This way, whenever I run "npm i", the new package will be added not only to the usual "dependencies" section but also to a custom section called "extDependenci ...

javascriptnode.jspackage.json