Not getting value of array, but array exists - JS

Question

I have created an ajax call and i am saving ajax success data in an array, I a calling that data outside of ajax, when i do console my array, It is returning array, here is the screenshot:

Here is my code:

function getData(){
   let surahArray = [];
   // created empty variable
   $.ajax({
       url: 'http://mp3quran.net/api/_english.php',
      type: 'get',
   success: function(data){
              let urlServer = data.reciters[112].Server;
              let resUrl;
              for(resUrl=1; resUrl <= 114; resUrl++){
                 resUrl = resUrl < 10 ? '00' + resUrl : '' + resUrl;
                 resUrl = (resUrl < 100 && resUrl > 9) ? '0' + resUrl : '' + resUrl;
                 surahArray.push(urlServer + '/' + resUrl + '.mp3');
             // pushing array data to that empty array
             }
           },
    error: function(err){
                console.log(err);
           }
   });
   let surahs = surahArray;
   // working
   console.log(surahs);
   // not working 
   console.log(surahs[0]); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="getData()">Get Data</button>

If i do console.log(surahs) It sis returning me array list, but when i do console.log(surahs[0]), It's returning me undefined in console.
Please help me, where i am wrong?

you fill the `surahArray` only after get response from the `ajax`, but trying to console it immediately, without waiting for the response. so in the moment you print it, its enpty, and `surahArray[0]` will be `undefined` — Yosef Tukachinsky, Mar 06 '20 at 07:10
@YosefTukachinsky So, what should i do to wait for response? — Zain Shabir, Mar 06 '20 at 07:15
You can create a function and then call that function on success of ajax and pass data to that function. All values of array must be accessible properly. Further more be careful while using let while defining variable. You can know more about difference between let and var by doing further research. Thanks — Maninder Singh, Mar 06 '20 at 07:26
Can you make answer? It will be helpful, I can't get it brother @ManinderSingh — Zain Shabir, Mar 06 '20 at 07:30

tudor.gergely · Accepted Answer · 2020-03-06T07:31:46.810

1

You should only use your variable (surahs) after you HTTP request is finished.

What you're experiencing in your case is console.log reading your array again when you expand it in the browser console (here are more details about this: console.log() shows the changed value of a variable before the value actually changes)

    function useMyData(data) {
      console.log(data);
    }

    $.ajax({
        url: 'http://mp3quran.net/api/_english.php',
        type: 'get',
        success: function(data){

            let urlServer = data.reciters[112].Server;

            let resUrl;
            for(resUrl=1; resUrl <= 114; resUrl++){
                resUrl = resUrl < 10 ? '00' + resUrl : '' + resUrl;
                resUrl = (resUrl < 100 && resUrl > 9) ? '0' + resUrl : '' + resUrl;

                surahArray.push(urlServer + '/' + resUrl + '.mp3');
                // pushing array data to that empty array

            }
            // use it here
            useMyData(surahArray);
        },
        error: function(err){
            console.log(err);

        }
    });

edited Mar 06 '20 at 07:31

answered Mar 06 '20 at 07:11

tudor.gergely

4,800
1
16
22

I wanna use my array outside of ajax, not inside , that's why, you can read my previous question for that – Zain Shabir Mar 06 '20 at 07:15
You can have a function which receives your data, and you call that inside your AJAX success callback. – tudor.gergely Mar 06 '20 at 07:27
I didn't get it? – Zain Shabir Mar 06 '20 at 07:29
check my edited response – tudor.gergely Mar 06 '20 at 07:31

Not getting value of array, but array exists - JS

1 Answers1