Insert JSON data values in to input boxes with the same name
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]);
str += "<th>" + prop + "</th>";
}
});
});