bind JSON properties to a form

Question

I have a JSON object and a <form>. If the JSON object has a property whose name matches the name of a form <input> I want the input to display the value of this property. Is there a simple way to do this with JQuery?

var json = {foo: 'foo', bar: 'bar};
def form = $('#myform');

// something magical that assigns JSON property values to form inputs with matching names

The form in question looks something like:

<form id = "#myform" action="/foo/bar/">
  <input name="foo"/>
  <input name="bar"/>
</form>

Does this question do what you need? http://stackoverflow.com/questions/635565/walk-json-response-and-populate-form-fields-more-efficient-approach — ipr101, Sep 08 '11 at 11:55
http://stackoverflow.com/questions/5096816/jquery-templates-plugin-how-to-create-two-way-binding isn't it what you're looking for ? — remi bourgarel, Sep 08 '11 at 11:56

score 13 · Accepted Answer · edited Jul 06 '20 at 13:11

13

You can run a loop that will search the elment and put the value:

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

and for the form:

<form id="myform">
    <input type="text" name="foo" />
    <input type="text" name="other" />
</form>

using .field instead of input is to work with textarea and select

edited Jul 06 '20 at 13:11

Andreas

5,393
9
44
53

answered Sep 08 '11 at 11:54

Benoît

7,395
2
25
30

In my case, I want to match the JSON property against the input **name** – Dónal Sep 08 '11 at 12:01
expertCode have modified with name. but it will not work with other item than input. – Benoît Sep 08 '11 at 12:17
This seems like it would only work one level deep into the json object – Douglas.Sesar Dec 02 '15 at 20:15

score 1 · Answer 2 · answered Sep 08 '11 at 12:00

1

You mean something like:

var json = {foo: 'foo', bar: 'bar}; 
def form = $('#myform');

for(var prop in json){
    $("#myform input[name="+prop+"]")[0].value = json[prop];
}

answered Sep 08 '11 at 12:00

abraxas

11
1

Waleed · Answer 3 · 2018-08-03T20:12:56.523

0

You can use my plugin, its fairly simple: https://github.com/devWaleed/JQuery-JSON-Form-Binding

Callbacks are optional if you want to populate data in your own way.

$("#myform").jsonToForm({ 
    data: {name: "Waleed", age: 23, gender: "Male"},
    callbacks: {
        age: function(value){
            $('[name="age"]').val(value+1);
        }
    }

});

edited Aug 03 '18 at 20:12

answered Aug 03 '18 at 18:54

Waleed

1,097
18
45

1

Please don't just post some tool or library as an answer. At least demonstrate [how it solves the problem](http://meta.stackoverflow.com/a/251605) in the answer itself. – Blue Aug 03 '18 at 19:39

expertCode · Answer 4 · 2011-09-08T12:02:12.387

0

try this:

var json = {foo: 'foo1', bar: 'bar1'};

for(var key in json) {
    if($('#myform input[name="'+key+'"]').length > 0){
        $('#myform input[name="'+key+'"]').attr('value',json[key]);
    }
}

I think it's this what you want ;)

See example here: http://jsfiddle.net/expertCode/FgwHe/

edited Sep 08 '11 at 12:02

answered Sep 08 '11 at 11:55

expertCode

533
4
14

voigtan · Answer 5 · 2018-08-07T06:40:33.280

0

either you find all your inputs and get the inputs names and check them in they are in the json something like: http://jsbin.com/ulelik/edit .

var json = {foo: 'foo', bar: 'bar',  ContactEmail: "ContactEmail", fooo2 : "trigunatmak kulkarni"};
var inputs = $('input', '#myform').each(function() {
  if (json[this.name]) 
  {
    this.value = json[this.name];
  }

});

you pick out all the inputs and check by their names if they have a property in the json object then it will use that property value as the input value.

edited Aug 07 '18 at 06:40

answered Sep 08 '11 at 11:55

voigtan

8,953
2
29
30

This is a borderline [link-only answer](//meta.stackexchange.com/q/8231). You should expand your answer to include as much information here, and use the link only for reference. – Blue Aug 03 '18 at 23:23

bind JSON properties to a form

5 Answers5

Linked