How to fill out a form using JSON?

Question

I get ajax response as JSON and you need to fill out the form. How to do it in jQuery or something else? Is something better than using $(json).each() ?

JSON:

 { "id" : 12, "name": "Jack", "description": "Description" } 

Form to fill

 <form> <input type="text" name="id"/> <input type="text" name="name"/> <input type="text" name="description"/> </form> 

Answer 1

You might want to take a look at the jQuery Populate plugin .

Although, if this is the only case you have, you can also do it manually.

Answer 2

 var json={ "id" : 12, "name": "Jack", "description": "Description" }; for(key in json) { if(json.hasOwnProperty(key)) $('input[name='+key+']').val(json[key]); } 

srry I thought this id property was set.

here: http://jsfiddle.net/anilkamath87/XspdN/

Answer 3

Assuming data is a JSON object, you can use it inside the $.getJSON callback:

 var $inputs = $('form input'); $.each(data, function(key, value) { $inputs.filter(function() { return key == this.name; }).val(value); }); 

Answer 4

Pretty simple in pure JavaScript:

https://jsfiddle.net/ryanpcmcquen/u8v47hy9/

 var data = { foo: 1, bar: 2 }; var inputs = Array.prototype.slice.call(document.querySelectorAll('form input')); Object.keys(data).map(function (dataItem) { inputs.map(function (inputItem) { return (inputItem.name === dataItem) ? (inputItem.value = data[dataItem]) : false; }); }); 

 <form> <input name="foo"> <input name="bar"> </form> 

Edit: this also works with other inputs, such as select , simply replacing document.querySelectorAll('form input') with document.querySelectorAll('form input, form select') .

This also circumvents a global leak in this answer: fooobar.com/questions/894251 / ...

Answer 5

Just use the json plugin for jQuery - like jquery-json for example.

Answer 6

You may also consider using jQuery templates for this purpose:

http://api.jquery.com/jQuery.template/

Answer 7

First you need to parse the JSON string to get an object that you can use:

 var o = $.parseJSON(json); 

(Note: You can also specify the json data type in an AJAX call, then it will be parsed into an object when you get the result.)

Then you can view the properties of the object in the object:

 $.each(o, function(key, value){ $('form [name=' + key + ']').val(value); }); 

Answer 8

jQuery The plugin plugin and code suggested by @Mathias inspired me to make my own plugin:

Here is my module code myPopulate. It uses the attr parameter as an attribute of the attribute name to use to identify them.

 (function($) { $.fn.myPopulate = function(json, attr) { var form = $(this); $.each(json, function(key, value) { form.children('[' + attr + '="' + key + '"]').val(value); }); }; })(jQuery); 

Using:

 { "id" : 12, "name": "Jack", "description": "Description" } 

form1 (match the name attribute):

 <form> <input type="text" name="name" /> <input type="text" name="id" /> <textarea type="text" name="description" /> </form> $('#form1').myPopulate(json, 'name'); 

form2 (match the alt attribute):

 <form id="form2"> <input type="text" name="nick" alt="name" /> <input type="text" name="identifier" alt="id" /> <textarea type="text" name="desc" alt="description" /> </form> $('#form2').myPopulate(json, 'alt');