0

I have a list of numbers (ex."20,145") that returns from an ajax call and I am pushing them to a js array. After reading the first index of list console.log(list[0]) I got undefinied on console screen. I need to use them inside DOMContentloaded function.

<script>
            var list = [] //my empty list
            for (var i = 1; i < 13; i++)
            {
                checkMonth(i); //calling function 12 times because of the months count
            }
            function checkMonth(n)
            {
                $.ajax
                    ({
                        type: "POST",
                        url: "Homepage.aspx/BringDatas",
                        data: "{'month':'" + n + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "text",
                        success:
                            function (output) {
                                var sendedvalue = JSON.parse(output);
                                list.push(sendedvalue.d);//that returns numbers like "20,456"
                            },
                        error:
                            function () {
                            alert("hata var");
                        }

                    });
            }

document.addEventListener("DOMContentLoaded", function ()
            {
                // after getting all values I inserted list I can see on console screen and it works
                var person = [];
                person = list;
                console.log(list); // that works succesfull
                console.log(list[0]) // that is not working
react_or_angluar
  • 1,568
  • 2
  • 13
  • 20
METIN TEKIN
  • 59
  • 8
  • Does this answer your question? [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) – Heretic Monkey May 29 '21 at 11:38
  • Ajax call is asynchronous in nature. so it will get executed after all the synchronous code. probably why this happens? can you try the same list[0] after the ajax call inside the promise – Kavvya Ramarathnam May 29 '21 at 11:44
  • I tried in success block it worked I can write on log screen as you said it's not constant. But still I can't use like that – METIN TEKIN May 29 '21 at 12:01
  • *I need to use them inside DOMContentloaded* - you're trying to use your values before they're available. They're simply not available, it's not a matter of "well I can't use it like that". If you're unable or unwilling to embrace the A part of ajax, then perhaps an alternative is to load the values when you load your page, eg in your `page_load` and pass it with the page data. – freedomn-m May 29 '21 at 12:52
  • Does this answer your question? [How to return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) – freedomn-m May 29 '21 at 12:52
  • The order of operation here is 1) `var list = [];` 2) `console.log(list[0]);` (which is undefined) 3) `$.ajax()` populates `list`. Just move all of the code before your `eventListener()` into that function. Also, if you have access to modify the server side code, consider returning all of that data at once, rather than making a dozen requests. Typically an ajax call inside of a loop is not the greatest idea. – PoorlyWrittenCode May 29 '21 at 19:15

0 Answers0