Javascript for循环中有多个.getJSON

尝试引用两个单独的JSON（.txt）文件，其中第二个依赖于第一个文件的值。成品应为h4标题，下方有“弹簧”和“（变量）教师姓氏”。相反，每次我都会列出所有的头h4-s，然后增加（1）个值。结果如何的示例：

<first h4>
<second h4>
<third h4>

spring
------
name associated with first h4


<first h4>
<second h4>
<third h4>

spring
------
name associated with first h4

spring
------
name associated with second h4


<first h4>
<second h4>
<third h4>

spring
------
name associated with first h4

spring
------
name associated with second h4

spring
------
name associated with third h4

春天
------
与第一个h4关联的名称
春天
------
与第一个h4关联的名称
春天
------
与第二个h4关联的名称
春天
------
与第一个h4关联的名称
春天
------
与第二个h4关联的名称
春天
------
与第三个h4关联的名称

我认为这可能与getJSON是异步的有关……下面是javascript：

<script>
$(document).ready(function() {
    $.getJSON(("degree.txt"), function(data) {
        var courselisting = "";
        for (var i in data) {
            var teacherfirst = data[i].year.spring.firstname;
            var teacherlast = data[i].year.spring.lastname;

            courselisting+= '<div class="grid">';
            courselisting+= '<div class="col-1-1"><h4 class="ci-header ci-round">' + data[i].course + ', ' + data[i].credits + ' Credit Hour(s)</h4></div>';
            $.getJSON(( "/programs/course-information/faculty/" + teacherfirst + teacherlast + ".txt"), function(data) {
                var lastname = data.lastname;
                var url = data.url;

                courselisting+= '<div class="col-1-4"><div class="col-1-3"><p class="small head">Spring<br></p><p class="small"><a id="" class="hlight" href="' + url + '" target="new">' + lastname + '</a></p></div></div></div>';
                document.getElementById("schedule-container").innerHTML+=courselisting;
            });
        };
    });
});
</script>

$（文档）.ready（函数（）{
$.getJSON（（“degree.txt”），函数（数据）{
var courselisting=“”；
用于（数据中的var i）{
var teacherfirst=data[i].year.spring.firstname；
var teacherlast=data[i].year.spring.lastname；
课程设置+=''；
课程列表+=''+数据[i]。课程+，'+数据[i]。学分+'学时'；
$.getJSON（“/programs/course information/feculty/”+teacherfirst+teacherlast+“.txt”），函数（数据）{
var lastname=data.lastname；
var url=data.url；
课程列表+='
弹簧
；
document.getElementById（“计划容器”）.innerHTML+=课程列表；
});
};
});
});

---

谢谢你们的帮助

在循环完成之前，回调不会运行。届时，课程列表将达到其最终价值

您可以将其封装在一个闭包中以避免出现这种情况

大概是这样的：

$(document).ready(function() {
    $.getJSON(("degree.txt"), function(data) {
        var courselisting = "";
        for (var i in data) {
            var teacherfirst = data[i].year.spring.firstname;
            var teacherlast = data[i].year.spring.lastname;

            courselisting+= '<div class="grid">';
            courselisting+= '<div class="col-1-1"><h4 class="ci-header ci-round">' + data[i].course + ', ' + data[i].credits + ' Credit Hour(s)</h4></div>';
            $.getJSON(( "/programs/course-information/faculty/" + teacherfirst + teacherlast + ".txt"), function(_data,_listing){
                innerFunc(_data,_listing);
            }(data,courselisting));
        };
    });
    function innerFunc(data,courselisting) {
                var lastname = data.lastname;
                var url = data.url;

                courselisting+= '<div class="col-1-4"><div class="col-1-3"><p class="small head">Spring<br></p><p class="small"><a id="" class="hlight" href="' + url + '" target="new">' + lastname + '</a></p></div></div></div>';
                document.getElementById("schedule-container").innerHTML+=courselisting;
            }
});

$（文档）.ready（函数（）{
$.getJSON（（“degree.txt”），函数（数据）{
var courselisting=“”；
用于（数据中的var i）{
var teacherfirst=data[i].year.spring.firstname；
var teacherlast=data[i].year.spring.lastname；
课程设置+=''；
课程列表+=''+数据[i]。课程+，'+数据[i]。学分+'学时'；
$.getJSON（“/programs/course information/faculty/”+teacherfirst+teacherlast+“.txt”），函数（_数据，_列表）{
innerFunc（_数据，_列表）；
}（数据、课程列表）；
};
});
函数innerFunc（数据、课程列表）{
var lastname=data.lastname；
var url=data.url；
课程列表+='
弹簧
；
document.getElementById（“计划容器”）.innerHTML+=课程列表；
}
});

在使用$.when执行其他操作之前，可以强制jQuery等待AJAX调用完成。例如，将两个调用包装在两个函数中：

$.when($.getJSON('firstFile.txt')).done(function () {
  $.getJSON('secondFile.txt');
  doSomethingWithResults();
});

---

有关更多信息，请参阅和。

您不想在循环中声明函数。非常有用，谢谢！事实上，我最终使用了下面的答案，但你的答案是正确的。我也很感谢When/Done/Then的信息……好东西。下面是我使用的：$.ajax（{url:'degree.txt'，async:false，dataType:'json'，success:function（data）{}）；