CODEWITHSUNDEEP
jqueryasynchronousgetjsonwait
Chris Stahl
Chris Stahl

Reputation: 1812

Creating a getJSON object

I've got a successful call going out to a coldfusion database controller using jQuery's getJSON method. The returned information comes back in the format:

{
    "COLUMNS": ["PRODUCT_HIERARCHY", "WEBPRODLINE", "POSITION", "FEATURES", "BENEFITS", "LINKS", "VIDEOS", "IMAGE_CUTAWAY", "MARKEDASNEW"],
    "DATA": [
        ["23456689", "ProdName1", "A Feature 1", "A Benefit 1", "url", "vid_url", "img_name", "N"],
        ["234566891", "ProdName2", "A Feature 2", "A Benefit 2", "url", "vid_url", "img_name", "N"]
    ]
}

I now want to store the returned information as an object that I can then filter locally instead of making another call to the db. The problem is in the initializeView function. Here's the relevant script:

$(document).ready(function() {

    var productsFlag = false;
    var enableLog = true;

    var allProducts = $.getJSON(jsonURL, { method: "getAllProducts", returnformat: "json" }, function(data) {
        productsFlag = true;
    });

    waitOnJson();

    function waitOnJson() {
        //this shows up in the log
        logThis('areProductsReady?');
        if (productsFlag) {
            //this shows up in the log
            logThis('productsFlags ready');
            initializeProductView();
        } else {
            //this shows up in the log
            logThis('productsFlags not ready');
            t = setTimeout(waitOnJson, 100);
        }
    }

    function initializeProductView() {
        //this shows up in the log
        logThis('initializeProductView');
        //this displays [object Object]
        alert(allProducts);
        //this displays undefined
        alert(allProducts.DATA);
        $.each(allProducts.DATA, function(i, item) {
            //this doesn't show up in the log
            logThis(item[1]);
        });
    }

    //as you can tell, this writes out to a debug console on the page
    function logThis(eventString) {
        if (enableLog === true) {
            $('<p/>').append(eventString).appendTo("#log");
        }
    }

});

I'm sure that the problem is in my lack of understanding about what getJSON is returning but I've either had too much caffeine or not enough and I'm not seeing it. HELP!

Also, any thoughts on my blocking wait step? I want to be able to use the data in several different functions but I also need to wait for it to load before initializing the view.

Upvotes: 0

Views: 847

Answers (2)

Jonathan M
Jonathan M

Reputation: 17451

Why not just do all the stuff currently in your wait step in an anonymous callback function submitted in the .getJSON()? It's much cleaner, and you don't have to keep doing the setTimeout gig.

As to what's happening with initializeProductView(), it's obviously getting called. Please post the code for it. You definitely need to be doing something with the data parm in the callback. Right now it's not being used.

For reference, and a closer look, heres the getJSON page: http://api.jquery.com/jQuery.getJSON/

EDIT: You're not doing anything with the JSON response. In the callback you should be doing something with the data parm. How are you accessing it in initializeProductView()?

EDIT 2: You're anonymous function called by ready is not properly closed.

EDIT 3: Taking a closer look, you've defined waitOnJson(), initializeProductView() and logThis() as methods of an anonymous function. When a call is made to the functions, you're calling them as if they're top level functions. Your anonymous function should really only do work, not define functions to be called.

Upvotes: 0

jamesmillerio
jamesmillerio

Reputation: 3204

First things first, you shouldn't have to wait on the json response like you are. The function in your getJSON method call only returns when a response is received. When it does, it returns the results of your JSON call as the first argument of the method call. So you can just do something like this (I stripped a lot of your stuff out for simplicity sake):

$(document).ready(function() {

    $.getJSON(jsonURL,
    {
        method: "getAllProducts",
        returnformat: "json"
    }, function(allProducts) {  //This function only executes when the response is received.

        //You access your products array here and do whatever you need with them
        alert(allProducts != null);

    });


});

Hopefully that clears things up somewhat.

EDIT: After reading your comment, if the alerts in your initializeProductView method are what you're confused about, it's probably because the getJSON method doesn't return the result of the JSON AJAX request, it returns an jqXHR object. That's why the .DATA attribute is undefined. If you did something to the effect of this, it would potentially work (assuming your returned JSON has a .DATA member):

var allProducts = null;

$.getJSON(jsonURL,
    {
        method: "getAllProducts",
        returnformat: "json"
    },
    function(data) {
        productsFlag = true;
        allProducts = data;
    }
);

Sorry about my misunderstanding earlier.

Upvotes: 2

Related Questions