Question

I’m writing single-page web application. Client interacts with server using AJAX retrieving quite complex JSON structures (generation of the values of some fields is more complex than others). Moreover different views display different portions of the data.

I would like retrieve from server only fields that are used by current view and merge retrieved structure with what I have on the client already.

For example complete structure I’m using is like this:

{ "A": "Value of A",  
  "B": { "X": "Value of B.X", "Y": "Value of B.Y" },  
  "C": { "L": 0, "N": 1, "M": 2 } }  

And let’s say, view #1 displays fields “A”, “B”.”X” and “C” and view #2 displays fields “A”, “B”.”Y” and “C”. So if view 1 and 2 are consequently presented to a user I would like to retrieve “A”, “B”.”X” and “C” before showing the first view and then retrieve only “B”.”Y” before showing the second view, because “A” and “C” were retrieve earlier (and we assume and values were not changed on the server).

Is the some Javascript library (framework) allowing to do this kind of merging? If not, how would you recommend to implement this functionality?

Answer 1

I don’t think that any js framework implements this particular functionality, but you can do it with jquery. It has built in ajax methods (including getJSON) and it handles object merging quite well with the help from it’s extend method.
The best way to resolve your problem is to implement the logic on the serverside : when you request the json object from the server, you send as parameters the fields that you already have and the server makes the decision of what fields it returns in the json.
In this case, a jquery implementation would be relative simple :

$(document).ready(function(){
    var scriptUrl1 = 'your_server_side_script_path';
    var scriptUrl2 = 'other_server_side_script_path';
    var object;
    $.getJson(scriptUrl1,function(result){
        var keys = [];
        $.each(result,function(i){keys.push(i);});
        object = result;
        $.getJson(scriptUrl2,{existingKeys : keys},function(result){
            $.extend(object,result);
            alert('your object is ready');
        });
    });
});