js how to make my array be visible by other functions

Question

my first alert shows the list of items but the second is not. I've never done anything in ajax/js before so i don't know how to return my array so it would be visible by other functions.

var mycarousel_itemList = [];

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "xml/images.xml",
        dataType: "xml",
        success: function (xml) {

            $(xml).find('image').each(function () {
                var id = $(this).attr('id');
                var url = $(this).find('url').text();
                mycarousel_itemList.push('{url:"' + url + '",' + 'id:"' + id + '"}');

                alert(mycarousel_itemList);
            });
        }
    });
    alert(mycarousel_itemList);
});

This is how my xml looks like

<images>
  <image id="1">
    <title>item</title>
    <url>images/image.gif</url>
    <desc>description of an item</desc>
  </image>
  <image id="2">
     <title>anotheritem</title>
    <url>images/images.gif</url>
    <desc>description of an item</desc>
  </image>
</images>

Where is your second alert? Or are you just referring to the second time the `ajax.get` routine runs? — El Ronnoco, Dec 13 '10 at 20:58
Please do not post updates to your question as answers (below). Stack Overflow is not a forum-formatted site. You should be editing your question, using that little [edit](http://stackoverflow.com/posts/4433404/edit) link. — Matt Ball, Dec 13 '10 at 21:12
See [this question](http://stackoverflow.com/questions/562412/return-value-from-function-with-an-ajax-call) for an explanation of the basic problem: **the code executes asynchronously.** Also, why did you tag your question with JSON when you're using XML? — Matt Ball, Dec 13 '10 at 21:15

Rob Sobers · Answer 1 · 2010-12-13T21:21:09.070

The mycarousel_itemList array is not declared within a function and thus is global. You should be able to access the array in your success event function.

There's something borked with your specific example (e.g., the success function isn't getting hit because the server doesn't respond).

If I copy and paste your code and simply replaced the server-side component with a JSONP service (just so I can do AJAX across domains), I have no problem accessing the array:

var mycarousel_itemList = [];

$(document).ready(function () {
    var url = "http://github.com/api/v2/json/user/show/yui";
    $.ajax({
        type: "GET",
        url: url,
        dataType: "jsonp",
        success: function (data) {
                mycarousel_itemList.push(data.user.company + ' - ' + data.user.blog);
                alert(mycarousel_itemList[0]);
        }
    });
});

You can test it out here.

score 0 · Answer 2 · answered Dec 13 '10 at 21:31

To answer the direct question: it's not possible to make the array populated when the second alert is called because by that time the AJAX call didn't have time to complete.

What function exactly need that array?

Just call it from within the success method after you populate the array and it will work just fine.

js how to make my array be visible by other functions

2 Answers2