Assign value to global variable using $.Ajax (JQuery)

Question

I am creating new functionality where I build a grid based on Json data returned from Ajax. I have decided I want to encapsulate this functionality within a function, so when I add/update/delete, I can on success retrieve a new representation of the data.

The problem I am having is I want to fill a global array but once my function that uses AJAX ends, I have an Array but no data. This isn't a problem when all the code is within the AJAX call but once I try to separate this in to its own function, it doesn't work as intended.

 <script type="text/javascript">
    var DataArray = [];

    // Use this function to fill array
    function retrieveNotes() {
        $.ajax({
            url: "http://wks52025:82/WcfDataService.svc/GetNotesFromView()?$format=json",
            type: "get",
            datatype: "json",
            asynch:true,
            success: function (data) {
                returnedData = data;
                $.each(data.d, function (i, item) {
                    DataArray[i] = [];
                    DataArray[i][0] = item.NotesTitle.trim();
                    DataArray[i][1] = item.ProfileName.trim();
                    DataArray[i][2] = item.IsShared;
                    DataArray[i][3] = item.NameOfUser.trim();
                }) // End of each loop
            }
        });
    }


    $(document).ready(function () {
        retrieveNotes();
        DataArray;
    </script>

1. asynch:true, --- async 2. read what it means in jquery documentation — zerkms
– zerkms, Commented May 15, 2013 at 11:40
it is because ajax is asynchronous, search for ajax callback — Arun P Johny
– Arun P Johny, Commented May 15, 2013 at 11:40
Typo here: $(document).ready(function () { retrieveNotes(); DataArray; </script> — A. Wolff
– A. Wolff, Commented May 15, 2013 at 11:41

adeneo · Accepted Answer · 2013-05-15 11:41:42Z

5

It's asynchronous, so you'll have to wait for the ajax call to finish before you can use the data :

function retrieveNotes() {
    return $.ajax({
        url: "http://wks52025:82/WcfDataService.svc/GetNotesFromView()?$format=json",
        type: "get",
        datatype: "json"
    });
}

$(document).ready(function () {
    retrieveNotes().done(function(data) {
        var DataArray = [];
        $.each(data.d, function (i, item) {
            DataArray[i] = [];
            DataArray[i][0] = item.NotesTitle.trim();
            DataArray[i][1] = item.ProfileName.trim();
            DataArray[i][2] = item.IsShared;
            DataArray[i][3] = item.NameOfUser.trim();
        });
        // you can only use the data inside the done() handler,
        // when the call has completed and the data is returned
    });
});

answered May 15, 2013 at 11:41

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

1 Comment

nick gowdy Over a year ago

@adeneo I will give your solution a try.

Collectives™ on Stack Overflow

Assign value to global variable using $.Ajax (JQuery)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related