jQuery中getJSON循环无法返回全部对象的问题排查

问题描述 #

我遇到一个技术问题：存在一个记录文件夹内所有JSON文件名的JSON文件，格式为[{"file":"filename1.json"},{"file":"filename2.json"}]。我通过getFiles函数触发ASP生成该JSON文件，再通过AJAX获取并将数据传递给putCodeblocks函数。在putCodeblocks中，我使用$.each遍历每个文件名，调用getJSON获取对应JSON文件的键值对，但循环仅处理第一个文件就停止。修改AJAX的async参数为true后，问题依旧。

相关代码如下：

// getFiles函数
function getFiles(c,sectiontype){ // 触发ASP脚本获取BKND/Codes/文件夹内的所有文件，并生成JSON文件到JSON/Codes/目录下
    // c 代表代码类型：ASP、PS、CMD 
    $.ajax('BKND/'+sectiontype+'.asp');
    var arrFiles=[];
    $.ajax({
        'async': true, // 原注释为设置false等待JSON加载，但实际设为true
        'url': 'JSON/'+sectiontype+'.json', // 获取JSON文件的URL
        'dataType': "json", // 数据类型
        'success': function (data) { // 请求成功回调
            putCodeblocks(data)
        }
    });
    
}
// putCodeblocks函数
function putCodeblocks(files){   
    console.log(files)
    $.each(files, function(key,value) {
      $.getJSON('BKND/Codes/'+value.file, function(data){
        $.each(data, function(index, element) {
            console.log(element.title)
        })
      })
    }); 
}

原因分析与解决方案 #

1. ASP生成JSON的请求未等待完成就读取文件 #

第一个$.ajax('BKND/'+sectiontype+'.asp')是异步执行的，触发ASP生成JSON文件后，代码立刻执行第二个AJAX去读取目标JSON文件，此时ASP可能还没完成文件生成，读取到的是旧的不完整数据（比如只有第一个文件名），导致后续循环只处理第一条。

解决办法：将两个AJAX请求串联，确保ASP生成文件完成后再读取：

function getFiles(c,sectiontype){
    $.ajax('BKND/'+sectiontype+'.asp')
    .done(function() {
        // 等待ASP生成文件完成后，再发起读取请求
        $.ajax({
            'async': true,
            'url': 'JSON/'+sectiontype+'.json',
            'dataType': "json",
            'success': function (data) {
                putCodeblocks(data)
            }
        });
    })
    .fail(function() {
        console.error('ASP生成JSON文件失败');
    });
}

2. 确认files数组的完整性 #

先检查console.log(files)的输出，确认数组是否包含所有预期的文件名。如果数组本身只有一个元素，说明ASP生成的JSON文件内容有误，需要排查ASP脚本是否正确遍历了BKND/Codes/下的所有文件，以及生成的JSON格式是否正确。

3. 排查后续JSON文件的加载错误 #

如果files数组是完整的，但只输出第一个element.title，可能是后续的getJSON请求失败（比如文件路径错误、文件不存在、JSON格式非法）。可以添加错误回调来定位问题：

$.each(files, function(key,value) {
  $.getJSON('BKND/Codes/'+value.file, function(data){
    $.each(data, function(index, element) {
        console.log(element.title)
    })
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
      console.error('加载文件失败:', value.file, '错误信息:', textStatus, errorThrown);
  });
});

内容的提问来源于stack exchange，提问作者Wyrm