Populating input field with JSON data

Question

I've received a JSON object from my server and I want it to loop through all the returned values and populate two input text fields, which are created dynamically.

At the moment I have 2 records returned but it only populates one set of fields and the other set although created remains unpopulated. The console.log output shows there are two records:

0 Object {emailAdd: "[email protected]", emailDesc: "work"} 
1 Object {emailAdd: "[email protected]", emailDesc: "home"}

This is the Jquery:

var emails = {% raw json_encode(emails) %};
$.each(emails, function(k,v) {
    x = 1;
    z = x++;
    $('<input type="email" placeholder="Email" value="" id="email'+x+'" data-name="emailAdd" /><input type="text" placeholder="Description" value="" id="email'+z+'" data-name="emailDesc"/>').appendTo('#email');
    $('#email' + x + '').val(v.emailAdd);
    $('#email' + z + '').val(v.emailDesc);
    x++;
    console.log(k, v); 
});

It seems to be just returning the last record, instead of all records. How can I show all the returned records?

You don't have any JSON there. The context you are using it in means the output of your server side template language is a JavaScript object literal. — Quentin
– Quentin, Commented Sep 1, 2014 at 12:32
Don't know if this is causing the issue but you are setting the id of the div always just to "email"... id's need to be unique... — nothing9
– nothing9, Commented Sep 1, 2014 at 12:37
@nothing9, he is appending "x" and "z" in "email string", so I think this is not the issue. — kazimt9
– kazimt9, Commented Sep 1, 2014 at 12:41

lpg · Accepted Answer · 2014-09-01 12:41:08Z

4

You are initializing var x on every each iteration. You could try this:

var emails = {% raw json_encode(emails) %};
x=1;
$.each(emails, function(k,v) {
z=x++;
$('<div class="form-group1" name ="email" id="email"><input type="email" class="form-control" placeholder="Email" value="" id="email'+x+'" data-name="emailAdd" /><br><input type="text" class="form-control" placeholder="Description" value="" id="email'+z+'" data-name="emailDesc"/></div>').appendTo('#email');
$('#email'+x+'').val(v.emailAdd);
$('#email'+z+'').val(v.emailDesc);
x++;
console.log(k,v); 
});

Demo fiddle : http://jsfiddle.net/orooct3q/

answered Sep 1, 2014 at 12:41

lpg

4,9371 gold badge18 silver badges16 bronze badges

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

1 Comment

user94628 Over a year ago

@Ipg Thanks for the spot. I was reinitializing the value back to one.

kazimt9 · Accepted Answer · 2014-09-01 12:37:25Z

1

Try this

emails = JSON.parse('{% raw json_encode(emails) %}'); // or use $.parseJSON()

$.each(emails, function(k,v) {
    // code goes here
    console.log(k,v); 
});

answered Sep 1, 2014 at 12:37

kazimt9

5635 silver badges11 bronze badges

1 Comment

Barmar Over a year ago

There's no need to call JSON.parse. JSON can be used as a Javascript literal.

PeterKA · Accepted Answer · 2014-09-01 12:43:57Z

1

Your code overwrites the previous values since you start counting x=1 in each loop. The following should show you all the data:

var emails = {% raw json_encode(emails) %};
$.each(emails, function(k,v) {
    $('<div class="form-group1" name ="email" id="email"><input type="email" class="form-control" placeholder="Email" value="" id="email' + k + '-0" data-name="emailAdd" /><br><input type="text" class="form-control" placeholder="Description" value="" id="email' + z + '-1" data-name="emailDesc"/></div>').appendTo('#email');
    $('#email'+k+'-0').val(v.emailAdd);
    $('#email'+k+'-1').val(v.emailDesc);
    console.log(k,v); 
});

answered Sep 1, 2014 at 12:43

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

Populating input field with JSON data

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related