CODEWITHSUNDEEP
javascriptjsonjquery
SurinderBhomra
SurinderBhomra

Reputation: 2199

jQuery AJAX and JSON Performance Query

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).

Upvotes: 4

Views: 4917

Answers (5)

Jonathan M
Jonathan M

Reputation: 17441

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.

Upvotes: 1

idrumgood
idrumgood

Reputation: 4924

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 ;
    }
});

Upvotes: 2

Robert Messerle
Robert Messerle

Reputation: 3032

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.

Upvotes: 1

Michal Franc
Michal Franc

Reputation: 1056

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.

Upvotes: 0

Joe
Joe

Reputation: 6416

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.

Upvotes: 0

Related Questions