jQuery AJAX and JSON Performance Query

Question

I am storing some JSON data in a text file to query using jQuery Ajax in my page. Currently, my text file contains around 10 facets of data (which could contain an additional 30 facets of data). The JSON data contains a questions and answers to those questions.

In my JavaScript files, I have setup different functions to get specific bits of data.

For example:

function GetAnswer(questionName) {
    var correctAnswer = null;

    jQuery.ajax({
        type: "GET",
        url: "../content/questions.txt",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: "",
        async: false,
        success: function (result) {
            $.each(result, function (i, q) {    
                if (q.questionID == questionName) {
                    correctAnswer = q.correctAnswer;
                    return false;
                }
            });
        },
        error: function () {   },
        complete: function () {   }
    });

    return correctAnswer ;
}

As you can see from my code-snippet, I am looping through my JSON to get the data I need. I have other functions coded in a similar fashion to get the question type, question name etc.

What I am finding is that I am calling these functions one after another to get the data I need. I think the way I am querying my JSON data is not good from a performance point-of-view since I am looping through the whole of my JSON dataset until I find a match.

Is there a better way to query my JSON data?

NOTE: I am having to use a text file to store questions due to restrictions of the technology I am using (SCORM 1.2).

A lot of great responses. If I could mark them all correct I would. I will be implementing idrumgood,Jonathan M and Robert Messerle responses. — Surinder Bhomra
– Surinder Bhomra, Commented Apr 10, 2012 at 7:36
that's one of the great things about SO: combining answers to get the best possible implementation. Good luck! — Jonathan M
– Jonathan M, Commented Apr 10, 2012 at 14:33

idrumgood · Accepted Answer · 2012-04-09 20:19:52Z

2

Looping through your JSON object is relatively quick. What is slow (comparatively) is loading in that text file each time (though it may be cached).

Either way, I would suggest loading in the JSON either the first time the user initiates a question/answer situation, or just load it in on page load (you can do it asynchronously) and store it for later use.

Example of the latter:

jQuery(document).ready(function(){
    var questions = '';

    jQuery.ajax({
        type: "GET",
        url: "../content/questions.txt",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: "",
        async: false,
        success: function (result) {
            questions = result;
        },
        error: function () {   },
        complete: function () {   }
    });

    function GetAnswer(questionName) {
        var correctAnswer = null;
        $.each(questions, function (i, q) {    
            if (q.questionID == questionName) {
                correctAnswer = q.correctAnswer;
                return false;
            }
        });

        return correctAnswer ;
    }
});

answered Apr 9, 2012 at 20:19

idrumgood

4,93421 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Surinder Bhomra Over a year ago

That's a great idea. I always thought that looping through my JSON dataset would effect performance considerably not loading in the text file.

Robert Messerle · Accepted Answer · 2012-04-09 20:15:08Z

1

The problem is that you have async set to false. This is bad. This halts the browser while it waits for your requests, and will cause the performance to feel very laggy.

answered Apr 9, 2012 at 20:15

Robert Messerle

3,03217 silver badges18 bronze badges

1 Comment

Surinder Bhomra Over a year ago

Never thought of doing that. Will make the change.

Jonathan M · Accepted Answer · 2012-04-09 20:26:48Z

Why not change the structure of your Q&A object to include an id for each question, and make the id an attribute in the object? Then you could pass the id to GetAnswer() and just have it go directly to the right question by referencing the correct attribute? The object could look like this:

{"myQuiz" :
    "Q1" :
        { "q" : "What color was George Washington's white horse?",
          "a" : "White"
        },
    "Q2" :
        { "q" : "In what city would you find the Leaning Tower of Pisa?",
          "a" : "Pisa"
        }
}

If this is assigned to result, and an id of Q2 was passed to GetAnswer(id), you could easily return result.myQuiz[id].a;

As an alternative, if the order of the questions is consistent, you could use an object that contains an array of q and a pairs, and refer to them by index rather than id.

Joe · Accepted Answer · 2012-04-09 20:13:52Z

0

Why not move the logic to a server-side script like PHP that can take in POST parameters and perform the queries against the JSON set and return only the record(s) you wish to receive. Or, if you are intent on keeping this in all js, you could simply store the JSON (as long as it is non-sensitive data) in a local variable and query against it locally.

answered Apr 9, 2012 at 20:13

Joe

6,4163 gold badges30 silver badges32 bronze badges

1 Comment

Surinder Bhomra Over a year ago

I would like to. But I don't have any flexibility in the technology I am using.

Michal Franc · Accepted Answer · 2012-04-09 20:14:29Z

0

You could make somekind of mechanism on the server to load data. Then you could send parameters like QuestionName and filter data. This will lower payload sent on the wire.

answered Apr 9, 2012 at 20:14

Michal Franc

1,05610 silver badges16 bronze badges

Collectives™ on Stack Overflow

jQuery AJAX and JSON Performance Query

5 Answers 5

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related