0

尝试引用两个单独的 JSON (.txt) 文件，其中第二个依赖于第一个中的值。成品应该是一个h4标题，下面有一个“Spring”和“（变量）老师的姓氏”。相反，我每次都会列出所有标题 h4-s，然后是增加（增加一个）数量的值。结果示例：

<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

我认为这可能与 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>

感谢你们提供的任何帮助！

4

2 回答 2

1

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

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

查看何时，完成，然后了解更多信息。

于 2013-04-30T02:50:04.460 回答
0

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

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

像这样的东西：

$(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;
            }
});
于 2013-04-30T02:42:19.900 回答