Generating XML output with jQuery, each, async problems

Question

I'm trying to create an XML formatted output in a textarea but have run into a asynch problems:

$(document).ready(function() {
    var geocoder;
    geocoder = new google.maps.Geocoder();
    $('#xmloutput').val('<?xml version="1.0" encoding="UTF-8"?>\n<parent>\n');
    var addresslist = 'one\ntwo\nthree';
    var addlines = addresslist.split('\n');
    $.each(addlines, function(name, value) {
        geocoder.geocode( { 'address': value}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                $('#xmloutput').val($('#xmloutput').val()+'<node>'+value+'</node>\n');
            }
        });
    });
    $('#xmloutput').val($('#xmloutput').val()+'</parent>');
});

I want this output:

<?xml version="1.0" encoding="UTF-8"?>
<parent>
<node>one</node>
<node>two</node>
<node>three</node>
</parent>

But I get this output because the geocoding takes a while...

<?xml version="1.0" encoding="UTF-8"?>
<parent>
</parent><node>one</node>
<node>two</node>
<node>three</node>

I've seen a lot of similar posts and the fix seemes to be chaining or callback, but I've not managed to get anything working yet. How should I approach this?

Thanks! Ben

afuzzyllama · Accepted Answer · 2012-10-22 13:59:54Z

2

Change your each loop and add the closing tag on last pass of the loop

/* first argument of `each` for an array is `index` which will increment on each pass*/
$.each(addlines, function(index,value) {
    geocoder.geocode({
        'address': value
    }, function(results,status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var newString=$('#xmloutput').val() + '<node>' + value + '</node>\n';           
            /* is this the last item? */
            if (index == addlines.length-1) {
                newString += '</parent>';
            }

            $('#xmloutput').val( newString)
        }
    });

});

It is still possible for geocoder to return values out of sequence due to asynchronous nature of call to service. If this happens you may need to create a local object of all results and use a deffered to check all results received prior to loading the complete string

edited Oct 22, 2012 at 13:59

afuzzyllama

6,5485 gold badges49 silver badges64 bronze badges

answered Oct 21, 2012 at 14:14

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Comments

Habibillah · Accepted Answer · 2012-10-21 14:10:10Z

0

try use .append() like code bellow:

$(document).ready(function() {
    var geocoder;
    geocoder = new google.maps.Geocoder();
    $('#xmloutput').val('<?xml version="1.0" encoding="UTF-8"?>\n<parent>\n');
    var addresslist = 'one\ntwo\nthree';
    var addlines = addresslist.split('\n');
    $.each(addlines, function(name, value) {
        geocoder.geocode( { 'address': value}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                $('#xmloutput').append('<node>'+value+'</node>\n');
            }
        });
    });
    $('#xmloutput').append('</parent>');
});

answered Oct 21, 2012 at 14:10

Habibillah

28.8k5 gold badges41 silver badges59 bronze badges

1 Comment

Mere Development Over a year ago

Hi, thanks for chipping in however that appends real html <node> tags to the textarea and doesn't change the value. I've used the solution below.

Collectives™ on Stack Overflow

Generating XML output with jQuery, each, async problems

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related