JSON response into input value

Question

I have the following code which returns a JSON array. I'm having issues putting the values into HTML inputs:

$('#button-validate').live('click', function() {
    $.ajax({
        url: 'index.php?route=sale/customer/addressValidation&token=<?php echo $token; ?>',
        type: 'post',
        dataType: 'html',
        data: 'shipping_address_1=' + encodeURIComponent($('input[name=\'address[1][address_1]\']').val()) + '&shipping_address_2=' + encodeURIComponent($('input[name=\'address[1][address_2]\']').val()) + '&shipping_city=' + encodeURIComponent($('input[name=\'address[1][city]\']').val()) + '&shipping_region=' + encodeURIComponent($('select[name=\'address[1][zone_id]\']').val()) + '&shipping_zip=' +  encodeURIComponent($('input[name=\'address[1][postcode]\']').val()),
        beforeSend: function() {
            $('.success, .warning').remove();
            $('#button-history').attr('disabled', true);
            $('#history').prepend('<div class="attention"><img src="view/image/loading.gif" alt="" /> Validating</div>');
        },
        complete: function() {
            $('#button-history').attr('disabled', false);
            $('.attention').remove();
        },
        success: function(data) {
            if (data['error']) {
                $('div#warning').attr('display', false);
                $('div#warning').after('<div class="warning" style="display: none;">' + json['error'] + '</div>');

            }else{
            $('#shipping_address_1').val(html['shipping_address_1']);
            $('#shipping_address_2').val(html['shipping_address_2']);
            $('#shipping_city').val(html['shipping_city']);
            $('#shipping_zip').val(html['shipping_zip']);
            }
        }
    });
});

The JSON array looks like this in Firebug:

[{"shipping_address_1":"21497 CROZIER AVE","shipping_address_2":"","shipping_city":"BOCA RATON","shipping_region":"FL","shipping_zip":"33428"}]

the Tin Man · Accepted Answer · 2012-10-03 00:05:52Z

1

First, it doesn't return a JSON object, as you defined here:

dataType: 'html',

change that to:

dataType: 'json',

Second, you're mixing up your result object all over the place:

success: function(data) {

All of your interactions should be data.something and you use json['arr'] here and html['string'] there.

Start by correcting those and then see if it is clear how to proceed. If not, I can update this answer.

edited Oct 3, 2012 at 0:05

the Tin Man

161k44 gold badges222 silver badges308 bronze badges

answered Oct 2, 2012 at 23:23

Kai Qing

18.9k6 gold badges41 silver badges61 bronze badges

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

Comments

the Tin Man · Accepted Answer · 2012-10-03 00:07:03Z

0

To access shipping_address_1 do:

data[0].shipping_address_1  OR data[0]["shipping_address_1"] ;

Also, what is html['shipping_address_1']? Your JSON object is in data and not in a HTML var here. Try this:

$('#shipping_address_1').val(data[0]["shipping_address_1"]);
$('#shipping_address_2').val(data[0]["shipping_address_2"]);
$('#shipping_city').val(data[0]["shipping_city"]);
$('#shipping_zip').val(data[0]["shipping_zip"]);

edited Oct 3, 2012 at 0:07

the Tin Man

161k44 gold badges222 silver badges308 bronze badges

answered Oct 2, 2012 at 23:20

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

1 Comment

Sushanth -- Over a year ago

try this console.log(data) .. What do you see

the Tin Man · Accepted Answer · 2012-10-03 00:08:49Z

0

You can use dot notation or bracket to access to the information:

With dot notation:

data[0].shipping_address_1

With bracket notation:

data[0]['shipping_address_1']

I suggest to use dot notation when possible, but if you are going to iterate over a fixed number of values I suggest using the second approach:

for(var i=1; i<6; i++) {
    $('#shipping_address_' + i).val(data[0]["shipping_address_"+ i ]);   
}

Remember: Dot notation is faster to write and also easy to read. On the other hand, the square bracket notation allows access to properties containing special characters and the selection of properties using variables, like the example presents above.

edited Oct 3, 2012 at 0:08

the Tin Man

161k44 gold badges222 silver badges308 bronze badges

answered Oct 2, 2012 at 23:34

sgroh

3541 silver badge13 bronze badges

Collectives™ on Stack Overflow

JSON response into input value

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related