将 ajax 返回数据保存到数组并在 ajax 之外调用该数组

Question

我创建了一个音频播放器。它从自定义数组开始，但我的音频文件大小为 1.6GB，它会破坏我网站的数据，这就是我现在使用 Quran 的 ajax 数据的原因。我创建了 ajax 调用来获取Quran surahs 和内部ajax success function 我正在运行for loop 来获取all surahs，现在我想将数据list of Surahs 保存到一个数组中，所以我可以在我的音频中使用ajax 之外播放器。

这是我的代码：

$(function(){

    // Surahs array and variables

    $.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;

                let surahs = urlServer + '/' + resUrl + '.mp3' ;
                console.log(surahs);

            }

        },
        error: function(err){
            console.log(err);
        }
    });

   // custom array, I wanna save here my ajax succes data like array
   // so i can use that in my custom audio player.
    let surahs = [
                    'url.mp3',
                    'url.mp3',
                    'url.mp3',
                    'url.mp3',
                    'url.mp3',
                    'url.mp3',
                    'url.mp3',
                    'url.mp3',
                    'url.mp3',
                    'url.mp3'
                ];

    let surahTitle = $('.surahTitle');
    let surah = new Audio();
    let currentSurah = 0;
    let surahsLength = surahs.length;

    // Every Surah source
    function nextSurahSrc(currentSurah){
        let surahTitleString = surahs[currentSurah].replace(/[_]/g, " ");
        surahTitleString = surahTitleString.replace('.mp3', "");
        surahTitleString = surahTitleString.trim();

        surah.src = webUrl + 'surahs/' + surahs[currentSurah];
        surahTitle.text(surahTitleString);
    }
    nextSurahSrc(currentSurah);

    // Play Surah
    function playSurah(){
        surah.play();
    }

    // Pause Surah
    function pauseSurah(){
        surah.pause();
    }

});

那个 ajax url 返回一个 url，如果你打开那个 url，你将被定向到一个音频 mp3 目录，我在我的 for 循环中制作那个音频 mp3，它在 ajax 调用中。

目前我正在获取这样的 ajax 数据网址：

但我希望它保存到一个数组中。 现在，请您帮我将 ajax 数据保存到一个数组中，以便我可以在我的自定义音频播放器中使用该数组。请帮帮我，我卡住了。

这是我对CTL's answer 的尝试：

$(function(){

    let surahArray = [];
    // Surahs array and variables

    $.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');

            }

        },
        error: function(err){
            console.log(err);

        }
    });

    let surahs = surahArray;
    // working
    console.log(surahs);

    // not working any of them
    console.log(surahs[0]);
    console.log(surahs.0);

)}

我在 ajax 之外获取数组，但无法获取数组值，请检查
下面是控制台截图：

Answer 1

在函数的最顶部创建一个空数组，并在新 URL 进入时将其推入。然后稍后使用该数组。 即：

let surahArr = []

//..inside ajax success
surahArr.push(urlServer + '/' + resUrl + '.mp3');

//then later in your app, you can loop over them
for(let surah of surahArr){
        //do stuff with surah
}