jQuery how to load some json records into a form fields?

Question

i have a json file:

{
   "data":"Click",
   "size":"Here"
}

and a form:

<form>
   First name: <input type="text" name="firstname" /><br />
   Last name: <input type="text" name="lastname" />
</form>

i was wondering what is the correct sintax for loading multiple json records into multiple form elements?? Something like a form that u want to u want to modify and the values get queered into those fields

i know i can use:

$getJSON('link_to_json_file' function() {

});

but i'm stuck here thanks

np_6 · Accepted Answer · 2021-04-26 07:17:36Z

14

Or if your data return was fieldname value pairs like:

{"firstname" : "John", "lastname" : "Doe"}

you could do it like:

$.getJSON('url_to_file', function(data) {
    for (var i in data) {
        $('input[name="'+i+'"]').val(data[i]);
    }
});

edited Apr 26, 2021 at 7:17

np_6

5081 gold badge7 silver badges20 bronze badges

answered Apr 9, 2011 at 11:50

wwd

3101 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vasiliy Ermolovich Over a year ago

$.each(data, function(key, val) { }); instead of for will be better

wwd Over a year ago

why would it be better? benchmarks i've seen show that traversing with the native for loops is faster, particularly with large objects.

Vasiliy Ermolovich Over a year ago

ok, may be it's a little bit faster, but each syntax looks like a normal iterator compared to native for with some things like data[i] and if you are not using very large objects I think you should use each

David Bradbury Over a year ago

While the OP's example uses input, it should be noted that the provided code won't hit textareas. I would change this to $('.form-class *[name="'+i+'"]').val(data[i]); - Where .form-class is the form you're wanting to target.

Jovan MSFT · Accepted Answer · 2011-04-27 15:56:20Z

Could you take a look at the JQuery loadJSON plugin on the http://code.google.com/p/jquery-load-json/ ? On the page http://code.google.com/p/jquery-load-json/wiki/WorkingWithFormElements is explained how this plugin load JSON object into the form. You can also find one live example here http://jquery-load-json.googlecode.com/svn/trunk/edit.html?ID=17. I think that this is exactly what you need. Just create empty form and load json in the form using the following code:

$('form').loadJSON(data);

This plugin handles all form elements such as check boxes, select list radio buttons etc. If you use it you will need to download plugin from the http://code.google.com/p/jquery-load-json/source/browse/trunk/scripts/jquery.loadJSON.js.

thecodeparadox · Accepted Answer · 2011-04-09 11:46:43Z

1

You may also use $.get like below;

$.get('your_file.[php/json]',function(d){
    $("input[name='firstname']").val(d.data);
    $("input[name='firstname']").val(d.size);
},'json');

answered Apr 9, 2011 at 11:46

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Comments

Vasiliy Ermolovich · Accepted Answer · 2011-04-09 11:39:57Z

0

So, what's wrong with $.getJSON? It works fine:

$.getJSON("1.json", function(data) {
  $('input[name="firstname"]').val(data["data"]);
  $('input[name="lastname"]').val(data["size"]);
});

answered Apr 9, 2011 at 11:39

Vasiliy Ermolovich

24.7k5 gold badges84 silver badges78 bronze badges

1 Comment

Patrioticcow Over a year ago

yeah, that works, but i was looking for a more shorter version of the code, because i might have 20 input boxes

Collectives™ on Stack Overflow

jQuery how to load some json records into a form fields?

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related