Mastering the Art of Accelerating getJSON Array Data

Currently, I am facing a challenge with retrieving a large array (4MB) of data from the server side. I have been utilizing the jQuery getJSON method to obtain the array data and display it on the browser. However, this process has proven to be quite slow. It seems that a significant portion of the time is being consumed by JSON parsing, although there may be other factors at play as well. I am in search of the most efficient and expeditious approach for acquiring this type of array data from the server. Any suggestions or insights would be greatly appreciated!

Answer №1

Having to send four MegaBytes of data all at once to the client side seems excessive, don't you think? Instead of trying to speed up the processing time for JavaScript and JSON, I suggest exploring ways to divide the data into smaller chunks so that you can work with less data at a time.

Ask yourself if you really need to load all of it simultaneously. Consider implementing server-side filtering for the returned JSON to only include the necessary data for your app's functionality.

For instance, if your intention is to display a large list of products, consider loading just the initial 50-100 items. Then, as the user scrolls down the page, make additional requests to fetch the next set of 50-100 items and so on.

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

Could one potentially generate new static files in Nextjs without needing to rebuild the entire app?

After recently beginning to utilize NextJs' getStaticProps feature, I have found that the static files generated at build time are quite impressive. However, my content is not static and requires updates without having to rebuild the entire app each t ...

javascript node.js reactjs next.js static-files

`Developing reusable TypeScript code for both Node.js and Vue.js`

I'm struggling to figure out the solution for my current setup. Here are the details: Node.js 16.1.x Vue.js 3.x TypeScript 4.2.4 This is how my directory structure looks: Root (Node.js server) shared MySharedFile.ts ui (Vue.js code) MySharedFi ...

javascript node.js typescript vue.js

What causes the jQuery mouseenter events to be activated in a random sequence?

I currently have a setup of 3 nested divs, resembling the concept of a Matryoshka doll. Each div has a mouseenter event function bound to it. When moving the mouse slowly from the bottom and entering layer three, the events occur in the following sequence ...

javascript jquery events event-handling mouseenter

Exploring the capabilities of VueJs in detecting events triggered by parent components

When users click on a specific image in the Collection(parent component), my goal is to display that image in a Modal(child component). Below is the code snippet: routes.js import Home from './components/Home'; import About from './compone ...

javascript laravel vue.js vue-router

Adding a <tr> tag to an HTML table using JQuery and AJAX in the context of Django framework step by step

I am currently navigating the world of Javascript, Jquery, and Ajax requests and I'm encountering a challenge with how my scripts are executing. My homepage contains a lengthy list of items (over 1200) that need to be displayed. Previously, I loaded ...

javascript html jquery django ajax

Manipulating array objects by replacing values in Typescript

Attempted two different methods to obtain a partial summary within each array object, but unfortunately, both were unsuccessful. var arr = [ { "value": 10, "newBalance": 0 }, { "value": -10, "newBalance": 0 }, ...

arrays angular typescript

Tips for organizing static JSON files for XCTests

Currently, I have a collection of static json files within my project that I am utilizing in unit tests instead of API responses. In order for this setup to function properly, the target membership of these files must belong to the production target; other ...

ios json bundle xctest

Is there a way to utilize a value from one column within a Datatables constructor for another column's operation?

In my Typescript constructor, I am working on constructing a datatable with properties like 'orderable', 'data' and 'name'. One thing I'm trying to figure out is how to control the visibility of one column based on the va ...

javascript jquery typescript datatable

Angular 1.4.8 Issue: [$injector:modulerr]

I can't seem to identify the main cause of this error. I consistently see a green underline below the word angular in my javascript file. I'm not sure why. (Using Visual Studio Code) HTML <html ng-app="myapp"> <head> ...

javascript html angularjs

$http({method}) is malfunctioning while $http.get is functioning properly

Issue Description: While working on my project, I encountered an issue where using $http({ method : 'GET', url : data : ..... param works fine for both GET and POST requests. However, when the same method is used in JSFiddle, it blocks my reques ...

javascript jquery ajax angularjs xmlhttprequest

I am seeking a solution to this error that occurs whenever I attempt to call a function using a button

Issue " _ctx.hello is not a function TypeError: _ctx.hello is not a function at onClick._cache.<computed>._cache.<computed> (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/di ...

javascript vue.js

What is the most efficient way to iterate through a list of URLs containing JSON data, transform each one into a dataframe, and then store them in individual CSV files?

My goal is to fetch data from various URLs, transform each JSON dataset into a dataframe, and store the resulting data in tabular form such as CSV. I am currently experimenting with this code snippet. import requests url_list = ['https://www.chsli.or ...

python json python-3.x dataframe

Parsing JSON arrays in Flutter

Despite it being a common inquiry, I have yet to find a solution, so here I am posing the question. The JSON format is as follows: [ { "id": "127", "image": "https://www.website.com/imgFldr/app/app-bangalore3.jpg", "city": "Bangalore", ...

android json parsing flutter

Locate the data attribute and store it in the database using an ajax request

I am in need of a proper script to insert a data attribute into the database upon clicking using ajax. HTML: <li><a data-cat="random name">Button</a></li> jQuery: $('li a').click(function() { $(this).data('cat&a ...

php jquery html ajax

Automatically update data in Angular without the need to refresh the page

One feature of my application involves displaying a table with rows retrieved from a database. The functionality responsible for fetching this data is an AJAX call, implemented as follows: getPosts(): Observable<Posts[]> { return this.http.post ...

javascript ajax angular typescript dynamic

Changing an object received as a prop in Vue.js

Is it acceptable to mutate values in a prop when passing an Object reference? In the process of developing a web application that involves passing numerous values to a component, I am exploring the most efficient method of handling value passing between c ...

javascript object vue.js dplyr prop

Two shapes engaging in mutual interaction

I am faced with a situation where I have two identical forms on different pages. Page 1 The form on this page serves as a quick call to action, pre-populating the form on the next page. <form action="/xxxx" method="post"> <select id="islan ...

php jquery ajax forms

Extracting data on an AngularJS platform by using web scraping techniques

I have been working on an AngularJS application that currently retrieves JSON data from an API using http.get, and it's been working really well. Recently, I've been exploring the idea of passing a URL to a static webpage and scraping the result ...

javascript angularjs

PHP 2D associative array losing modified values

I have encountered a perplexing issue related to PHP and a 2-dimensional associative array. I am currently taking a PHP class, but unfortunately, the instructor seems to lack expertise in this area. Initially, I declared the array as global and stored som ...

php arrays

A tool that showcases outcomes determined by the interaction of two variables

I have two select inputs: <select id="inputA"> <option>1</option> <option>2</option> <option>3</option> </select> <select id="inputB"> <option>1</option> <option>2</opti ...

javascript jquery function

Newtab Q&A