RSS
 

Inserting JSON data in to name-matched controls

01 Sep

Thought this might be handy… This loop will insert the values from a JSON object in to text boxes.

It loops around each key-pair and inserts the value if there is a text box with an ID that matches the key name.

This is the JSON data: (yourJson.js)

{"page":1,"total":1,"records":1,"paging":20,"rows":[
{"clipId":"14792","barcode":"02528","title":"My Project Sample","format":"DigiBeta","source":"1242",
"runningTime":"14 Mins","location":"Library","timeCode":"10:00:00","cUser":"Sam",
"cDate":"1 Jan 2007","mUser":"Sam","mDate":"1 Jan 2008"}]}

This is the form HTML:

<form>
	<table>
		<tr>
			<th>Clip Id</th>
			<td><input id='clipId'></td>
		</tr>
		<tr>
			<th>Barcode</th>
			<td><input id='barcode'></td>
		</tr>
		<tr>
			<th>Title</th>
			<td><input id='title'></td>
		</tr>
		<tr>
			<th>Format</th>
			<td><input id='format'></td>
		</tr>
		<tr>
			<th>Source</th>
			<td><input id='source'></td>
		</tr>
		<tr>
			<th>Running Time</th>
			<td><input id='runningTime'></td>
		</tr>
		<tr>
			<th>Location</th>
			<td><input id='location'></td>
		</tr>
		<tr>
			<th>Time Code</th>
			<td><input id='timeCode'></td>
		</tr>
	</table>
</form>

This is the jQuery:

	$.getJSON("/yourJson.js, function(myJson){
		$.each(myJson.rows, function(i,item) {
		    for (prop in item) {
				$('#' + prop).val(item[prop]);
		    }
		}); 
	});
 
 

Tags: ,

Leave a Reply