Dan Wahlin's WebLog

My company is currently working on a consulting project that uses ASP.NET MVC and a lot of jQuery and JSON behind the scenes for data transfer which is a lot of fun.  I’m personally tasked with the back-end processes but also handling user interface updates as JSON data is received.  I have a form with several different controls in it that are updated once JSON is returned from a controller action and the controls are updated using jQuery selectors.  Something like this:

$('#OfficeProfile_CustomerID').val(json.OfficeProfile.CustomerID);
$('#OfficeProfile_OfficeProfileID').val(json.OfficeProfile.OfficeProfileID);
$('#OfficeProfileAddress_AddressID').val(json.OfficeProfile.AddressID);
$('#OfficeProfile_OfficeTitle').val(json.OfficeProfile.OfficeTitle).convertNullToEmptyString();
$('#OfficeProfile_OfficeContactName').val(json.OfficeProfile.OfficeContactName).convertNullToEmptyString();
$('#OfficeProfile_NumberOfPeople').val(json.OfficeProfile.NumberOfPeople).convertNullToEmptyString();
$('#OfficeProfile_Phone').val(json.OfficeProfile.Phone).convertNullToEmptyString();
$('#OfficeProfile_Comments').val(json.OfficeProfile.Comments).convertNullToEmptyString();
$('#OfficeProfileAddress_Street').val(json.OfficeProfile.Address.Street).convertNullToEmptyString();
$('#OfficeProfileAddress_City').val(json.OfficeProfile.Address.City).convertNullToEmptyString();
$('#OfficeProfileAddress_StateID').val(json.OfficeProfile.Address.StateID).convertNullToEmptyString();
$('#OfficeProfileAddress_Zip').val(json.OfficeProfile.Address.Zip).convertNullToEmptyString();

While this code works fine, it quickly becomes a pain as JSON properties change and it’s just too much typing for my taste.  I decided that there must be a more compact way to do this given that there’s definitely a pattern to the ID names used in the jQuery selectors and the value assigned to each control.  After thinking about it more I realized that I need to use “reflection” (a technique used to inspect objects in the .NET framework) to access the JSON properties and then handle updates to the controls.  But, how do you reflect over a JSON object and figure out what properties it has?  Turns out it’s pretty easy…after a quick Google/Live search anyway.  You can iterate through the JSON object’s properties using a normal JavaScript for loop and then access each property name and value.  Here’s what I ended up doing to simplify the code above and make it more dynamic:

var prefix = '#OfficeProfile_';
var addrPrefix = '#OfficeProfileAddress_';
for (prop in json.OfficeProfile)
{
    var propVal = json.OfficeProfile[prop];
    if (prop == 'Address') //Object property within JSON..loop through Address object properties
    {
        for (addrProp in propVal)
        {
            $(addrPrefix + addrProp).val(propVal[addrProp]).convertNullToEmptyString();
        }
    }
    else
    {
        $(prefix + prop).val(propVal).convertNullToEmptyString();
    }
}

For more information about onsite, online and video training, mentoring and consulting solutions for .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com/.