The length of JSONPath in Javascript is significantly longer, approximately 3000 times lengthier than a traditional loop

I am experiencing performance issues with JSONPath implemented in JavaScript using the Stephan Goessner Library.

Below is an example of the JSON structure causing the problem:

[
    {
        id:1, 
        name: "lorem", 
        elements: 
        [
            {
                id:101,
                date: Fri Jan 31 2014 18:03:41 GMT+0100 (Paris, Madrid), // Javascript Date Object,
                instances: [ 
                    {
                        id: 1001, 
                        properties: [
                            {
                                code: 'ipsum lens', 
                                id: 1001, 
                                values: [
                                    "value1", 
                                    "value2",
                                    ...
                                    // less than 5 values
                                ]
                            }, 
                            ... , // between 20 to 40 items
                        ]
                    },
                    ... // About 100 items
                ]
            },
            ... // Less than 5 items
        ], 
        meta: [
            {
                id: 10000, 
                code: 'codeabc', 
                property1: true, 
                property2: false,
                property3: 2939, 
            }, 
            ... // between 20 to 40 items
        ]
    }, 
    ... // 4 items
]

The data quantities are as follows:

  • level1 contains 4 items
  • level2 'elements' contains 2 items on each level
  • level3 'instances' contains about 100 items per specific element
  • level4 'properties' contains about 15 items

When using JSONPath, the following code results in a response time of approximately 4 seconds in Chrome:

var startDate = new Date();
var searchedValue = jsonPath(
    myJSONStore, 
    "$.[?(@.name == 'myelementname')].elements[?(@.id == 100)].date"
)[0];
console.log(date)
console.log("Retrieved in " + ((new Date().getTime() - startDate.getTime()) / 1000) + "s")

I found this delay too long considering the amount of data present. I also tried the traditional method without JSONPath:

var startDate = new Date();
var searchedValue = null;
for(i in myJSONStore) { 
    if (myJSONStore[i].name == 'myelementname') { 
        for (j in myJSONStore[i].elements) {
            if (myJSONStore[i].elements[j].id == 100) {
                var date = myJSONStore[i].elements[j].date;
                break;
            }
        }
    }
}
console.log(date)
console.log("Retrieved in " + ((new Date().getTime() - startDate.getTime()) / 1000) + "s")

This time, it only took 1 millisecond.

While JSONPath is appealing due to its simplicity and concise syntax (following the kiss principle), the significant increase in calculation delay of about 4000 times is concerning. Is there a way to reduce this delay?

Answer №1

Here is the code snippet you can use in your aspx.cs page:

string filePath = "Specify the path to your JSON file here"; HiddenFieldValue.Value = File.ReadAllText(filePath);

Next, include the following code in your aspx page to retrieve the JSON object from the hidden field:

var jsonObject = $.parseJSON(document.getElementById('<%=HiddenFieldValue.ClientID%>').value);

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

Implementing the insertion of a <div> element within an input field using jQuery

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></scr ...

Can you explain the purpose of the .json() function in Angular2?

Can you explain the purpose of the .json() function within http requests in Angular2? Here is an example code snippet: this.http.get('http://localhost:8080/getName') .subscribe(res => this.names = res.json()); Is it correct to assume that t ...

What is the reason behind not requiring to invoke the next function in a Sails.js controller method, even when it includes an asynchronous database query?

Sample controller function: fetchArticles: function(req, res) { Articles.find({}).exec(function(err, articles) { res.json(articles) // It appears this part is asynchronous // Is next() required here? }) } In my experience, I typicall ...

What is the best way to extract the primary base64 value from reader.result?

After successfully retrieving the base64 value of my file, I noticed that along with the value, I am also getting the type of file and the type of string. However, I only require the actual value in order to send it to the backend. Code for converting fil ...

Error: Unexpected syntax error in JSON parsing after importing PHP file

Encountered an unexpected error: Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data site:stackoverflow.com, which is appearing in the Firefox debug console. On my website, I have a form that triggers this function o ...

I'm curious if there is a specific jQuery event that triggers right before an element loses focus or right before the next element gains focus

I am facing a situation where I have two input elements in a form that are closely connected. The first element triggers an ajax call to check for existing data in the database when the user tries to move away from it, while the second element opens a moda ...

Using Javascript to Highlight a Single Row in a Table

Greetings esteemed members of the skilled community at StackOverflow, I must humbly ask for your expertise in solving a dilemma that I am currently facing. The situation is as follows: I have a table generated from an SQL query, and it is crucial for the ...

How to incorporate a JavaScript file into a Handlebars template

I am having trouble receiving calls to my JavaScript file. What could be the issue? Using MVC. Here is the code in view file, file.hbs: <div class="container"> <h2 onClick="test()">Title</h2> {{>list}} </div> <script sr ...

NodeJs ERROR: Module not found

When trying to launch an instance running ubuntu with express, I encountered a module not found error that does not occur on my Windows machine. Error Message: node:internal/modules/cjs/loader:1085 throw err; ^ Error: Cannot find module './src/c ...

Avoid fetching objects on the PHP page that have been passed from an AJAX request

Hello, I am having trouble retrieving Ajax Data in my PhP page as it is throwing an error. I am passing the data as a JSON object. The error message I am receiving is shown below: https://i.stack.imgur.com/k8Va6.png Here is the code from Edit.php: $(&ap ...

What advantages does Redux offer?

I've been considering diving into the world of ReactJS lately and I could really use some guidance on when to incorporate Redux. The concept seems a bit complex to me, especially coming from an Angular2+ background. Although I've come across sev ...

What is the quickest method for importing React.js Material Icons in a single line of code?

While working on my initial react.js project as a beginner, I encountered the frustration of having to import Material UI icons individually. This process made my code unnecessarily long and required me to repeatedly visit the browser to copy the icon li ...

Modifying the color of the error icon in Quasar's q-input component: a step-by-step guide

https://i.stack.imgur.com/4MN60.png Is it possible to modify the color of the '!' icon? ...

Waveform rendering in HTML5 using wavesurfer.js struggles to handle large mp3 files

Recently, I was considering incorporating wavesurfer.js into one of my projects so I decided to explore the demo on To test it out, I uploaded a large mp3 file (approximately 2 hours long) onto the designated area in the middle of the page. It appeared to ...

Picture failed to load

I am struggling to get an image to display on my webpage, as only the alt text is appearing. Here is the code I am using: return ( <> <div className="container my-5"> <div className="row ju ...

Merging a variable and its corresponding value in JavaScript

I am attempting to achieve a similar functionality in Angular javascript (with simplified code): var modelName = "date"; if (attrs.hasOwnProperty('today')) { scope.modelName = new Date(); } In the scenario above, my intention is for scope.m ...

Ignoring TypeScript overloads after the initial overload declaration

Issue An error occurs when attempting to call an overload method for a specific function. The call only works for the first defined overload, causing an error if the call is made to the second overload with mismatched typing compared to the first overload ...

There was a type error that occurred because the property 'addEventListener' could not be read from an undefined value

Encountering an issue with the JavaScript libraries three.js and OrbitControls.js despite following a tutorial: However, an error is being displayed in the console: Uncaught TypeError: Cannot read property 'addEventListener' of undefined at ne ...

What's the issue with the submit button not functioning on the form?

After downloading a sample form, I encountered the following code: <form id="login-user" method="post" accept-charset="utf-8" action="/home.html" class="simform"> <div class="sminputs"> <div class="input full"> <l ...

Having trouble fetching values in Node.js after a certain period of time has passed

Whenever the page loads, the sha1 function is supposed to run and it should run after 5 seconds. var crypto = require('crypto'); console.log(sha1()); setTimeout(sha1, 5000); console.log(sha1()); function sha1() { var dt = dateTime.create(); ...