Update page using JSON data

updateWithJSON is a jQuery plugin that updates elements on your page based on key/value pairs in a JSON object. Usage:

$.updateWithJSON(jsonData)

Here's a demo, and here's how it works:

iterate over each property/value combination in the JSON object
look for an element in the DOM that matches the property name
- first, look for an element with a matching id attribute
- if no element with a matching ID is found, look for input, select or textarea elements with a matching name attribute
update the value, contents or selection of the matched element(s) based on the value in the JSON object

NOTE: If you have multiple checkboxes with the same name attribute, or a select that allows multiple values, you'll need to pass the values of the selected items in an array:

{ 
  text_input: 'value1',
  checkbox_group: ['value1','value2','value3'],  
  multi_select: ['value4','value5','value6']
}

If you use a name attribute like "input[]" on a set of related checkboxes, remember that you'll need to quote it in the JSON object:

{
  'input1[]': ['value1','value2','value3']
}

The back story

For a recent project, I needed to update elements on a page based on some server-side calculations. JSON is a handy way to transport data from the server back to the browser, and jQuery's getJSON() method makes it painless. So, for example, I was getting back

{ foo: 'bar' }

with which I needed to update an element corresponding to "foo" and give it the value "bar". Simple enough; on the page I was dealing with, it was easy to put a unique ID on every element that would need to be updated, and I matched that ID with the property name in the JSON object. It was (almost) as simple as this:

$.each(data,function(name,value) {
  $('#'+name).val(value);
}

It's not always the case, though, that you can easily put a unique ID on each element that will need updating; for example, PHP rewards you if you put the same name attribute on related checkboxes. Having checkboxes with the same name but different IDs can quickly get confusing when you're dealing with data on the client side and on the server side. The solution above worked in my particular case, but I wanted something that would work more broadly -- say, on pages that had related checkboxes -- and that's how I came up with the plugin.

Loading mentions Retweet

Posted

1 comment

Jan 26, 2008

AKar said...

This plugin is useful for me. After a little play, i found it does not work for input element *textarea* in firefox version2.0.0.11 and 3b2(with jQuery-1.2.2):

(1).When the value textarea is not changed after page load, it works;
(2).When the value textarea is changed by jQuery(through firebug), it works;
(3).When the value textarea is changed by keyboard input, it does NOT works;

(but case (3) works is in a IE6 browser.
cheers

rmurphey

About Me

Get Updates