Flattening a complex json object for mvc binding

Question

My controller is returning an object graph to the view in json format like this

return Json(customer);

On the view my json object looks like this

{
    Name: 'Joe',
    Budget: { Amount: 500, Spend: 100 }
}

Which maps correctly to my customer object:

public class Customer 
{
    public string Name {get;set;}
    public Budget Budget{get;set;} 
}

public class Budget  
{
    public decimal Amount{get;set;}    
    public decimal Spend{get;set;} 
}

I want to pass that same json object back to another method on the controller with this signature:

public ActionResult Method(Customer customer)

When I do this customer's name get populated but not the Budget class, which I understand why because the modelbinder is expecting this: {Name:'Joe','Budget.Amount':500,'Budget.Spend': 100}

So I have to options: 1. I can return the json object in the format it wants, but I don't know how because you can't do this:

return Json(new { Budget.Amount= 500})

2. I can flatten the json object on the client side. Is there plugins or methods to do this?

Answer 1

Here's a function that convert an object to a flat hash

function flatten(json){
    var nj = {},
        walk = function(j){
            var jp;
            for(var prop in j){
                jp = j[prop];
                if(jp.toString() === "[object Object]"){
                    walk(jp);
                }else{
                    nj[prop] = jp;
                }
            }
        };
    walk(json);
    return nj;
}

Answer 2

Protovis has a JavaScript flattener, available under the BSD License.