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

Question

我创建了一个音频播放器。它从自定义数组开始，但我的音频文件大小为 1.6GB，它会破坏我网站的数据，这就是为什么我现在使用 ajax 数据 Quran。我已经创建了 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();
    }

});

那个ajaxurlreturns一个url，如果你打开那个url，你会被引导到一个音频mp3目录，我正在 ajax 调用中的 for 循环中制作音频 mp3。

目前我得到 ajax 数据 url 是这样的：

但我想把它保存到一个数组中。现在，您能否帮我将 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
}

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

Save ajax return data to an array and call that array outside of ajax

javascript

arrays

ajax

jquery

jquery-events