storing json data returned from jquery post

Question

Im just starting to get the hang of using json and Id like to somehow reuse the data returned as json from a jquery post request.

For example, I have one method that returns a json array of all my customers with all related fields. How can I store this as an object that can be reused on other methods actively available on my javascript class without having to make another request for another json object.

Here is an example my javascript class.

/* Sales Orders Class */

function SalesOrders() //construct function 
{
    this.siteURL = "http://example.com/";
    this.controllerURL = "http://example.com/salesOrders/";
    this.salesOrderID = $('input[name="salesOrderId"]').val();
}

salesOrder = new SalesOrders; //invoke the class constructor

/* Data Objects */

SalesOrders.prototype.loadCustomers = function()
{
    //get jsonData object
    $.post(this.controllerURL + "load_customers",
        function(data)
        {
            //pass jsonObject to writeCustomerOption method
            salesOrder.writeCustomerOption(data);
        }
    );
}

SalesOrders.prototype.loadCustomer = function(data)
{
    //set salesOrder customer
    salesOrder.updateSalesOrderCustomer(data);

    //alert(data)
    //get jsonData object
    $.post(this.controllerURL + "load_customer", { customer_id: data },
        function(data)
        {

            //pass data to writeCustomerAddress
            salesOrder.writeCustomerAddress(data);
        }
    );
}

/* UI Manipulation */

SalesOrders.prototype.writeCustomerOption = function(data) //create customer dropdown from json on loadCustomers
{
    var customers = eval(data);
    for(var counter = 0;  counter < customers.length; counter++)
    {
         //alert(customers[counter].name);
        var optn = document.createElement("OPTION");
        optn.text = customers[counter].name;
        optn.value = customers[counter].cid;
        document.getElementById("customerSelect").options.add(optn);
    }
}

SalesOrders.prototype.writeCustomerAddress = function(data)
{
    //parse json array into objects
    var customerInfo = jQuery.parseJSON(data);

    //create formated address objects
    var billTo = customerInfo.name + "\n" + customerInfo.billing_street + "\n" + customerInfo.billing_city + " " + customerInfo.billing_state + ", " + customerInfo.billing_zip + "\n" + customerInfo.phone;
    var shipTo = customerInfo.name + "\n" + customerInfo.shipping_street + "\n" + customerInfo.shipping_city + " " + customerInfo.shipping_state + ", " + customerInfo.shipping_zip + "\n" + customerInfo.phone;

    //write billTo & shipTo
    $("#billToTextAreaTarget").html(billTo);
    $("#shipToTextAreaTarget").html(shipTo);

}

/*
UI Interaction 
*/

SalesOrders.prototype.selectCustomer = function()
{
    this.customerID = $("#customerSelect option:selected").val();
    //load and write customer info
    salesOrder.loadCustomer(this.customerID);

    //load and write customer items
    salesOrder.loadCustomerItems(this.customerID);

    //replace add item button
    salesOrder.replaceAddItem();
}

Answer 1

I have similar issue with this.

I've used a dom object to store the json object with JSON.stringify and JSON.parse to manipulate the data. This way.

$.post(url,
    { params },
    function(data) {
        $("#json_data_store").val(JSON.stringify(data));
    },
    "json");

And that store the json object in a hidden input object.

<input type="hidden" id="json_data_store" value="" />

Then when we need to manipulate the data, we use JSON.parse:

var data = JSON.parse($("#json_data_store").val());

That's how i resolve this. I'd hope you can resolve it too.

Answer 2

Add an attribute to the SalesOrder class to store the customers that are returned from GetCustomers (or make it a "private" with an accessor method that you use to lazy load the list as needed.

Think of it in terms as if it was an object in a typically OO language (C#, whatever), just a different syntax to define the properties/attributes and methods.

Answer 3

Place a variable in a more global scope (probably at the same level salesOrder is defined), something to the effect of:

var lastJSONReponse = null;

Then, within the response callback, just assign the data to that variable:

function(data){
  lastJSONResponse = data;
  salesOrder.writeCustomerOption(data);
}

Now as long as the variable is in the scope you need, that variable will last throughout the duration you need it to. Just be sure to check it before accessing it outside of the ajax call:

if (data != null){
  // proceed
}