for循環中的多個.getJSON

Question

嘗試引用兩個單獨的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> 

感謝你們可以提供任何幫助！

Answer 1

您可以強制jQuery來等待一個AJAX調用其他做什麼用$。當之前完成。例如，你的包裹兩個電話在兩個功能：

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

更多信息，請參見when，done和then。

Answer 2

直到循環完成並執行完成，回調纔會運行。在這一點上，列隊列表將達到其最終價值。

你可以把它包裝在一個閉合中以避免這種情況。

事情是這樣的：

$(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; 
      } 
});