多個函數的JavaScript回調

Question

我目前正在嘗試從api控制器中獲取結果，並將該json數據添加到我的剃刀視圖中的表中。在創建表之前，我使用了用於填充未填充數據的表的一些問題。我試圖用回調來解決這個問題，但我仍然沒有經驗，並且無法從教程中獲得理解。

下面是javascript函數我有（而且爲了他們必須1. $ .getJson 2. fillArray功能3. AddToTable功能）：

$(document).ready(function() 
{ 


    $.getJSON('api/GetRestaurants/detroit').done(fillArray(data)) 


}); 

function fillArray(data, callback) 
{ 
    var restaurant = 
    { 
     Name: "", 
     PhoneNumber: "", 
     PlaceID: "", 
     Rating: 0, 
     Website: "" 
    }; 

    var dataArray = new Array(); 

    for (var k = 0; k < data.length; k++) { 
     restaurant.Name = data[k].Name; 
     restaurant.PhoneNumber = data[k].PhoneNumber; 
     restaurant.PlaceID = data[k].PlaceID; 
     restaurant.Rating = data[k].Rating; 

     dataArray.push(restaurant); 

    } 
    callback(AddToTable(dataArray)); 
} 
function AddToTable(dataArray) { 
    document.getElementById("tbl").innerHTML = 
     '<tr>' + 
     '<th>Restaurant Name</th>' + 
     '<th>Restaurant PlaceID</th>' 
    for (var i = 0; i < dataArray.length; i++) { 
     +'<tr>' 
     + '<td>' + dataArray[i].Name + '</td>' 
     + '<td>' + dataArray[i].PlaceID + '</td>' 


     + '</tr>'; 
    } 
} 

的數據是存在的，並且API控制器調用是成功的，我只需要數據在表使用該數組之前填充數組。

我感謝任何幫助和/或評論，謝謝你們：]。

Answer 1

fillArray函數中的所有命令看起來都是同步的（即代碼在完成之前不會移動），只要在您的函數添加數據之前調用該函數即可。

Answer 2

當你做到以下幾點：

$.getJSON('api/GetRestaurants/detroit').done(fillArray(data)) 

您呼叫的fillArray()功能，並將其結果傳遞給.done()功能。相反，您應該將fillArray函數傳遞給.done()函數。

$.getJSON('api/GetRestaurants/detroit').done(fillArray) 

我更喜歡在設置回調時使用匿名函數。然後命名的函數可以擁有對他們有意義的簽名。匿名回調函數當然有它所需的簽名。然後在匿名回調函數中調用命名的函數。

$(document).ready(function() { 
    $.getJSON('api/GetRestaurants/detroit').done(function(data) { 
     var restaurants = createRestaurantArray(data); 
     addRestaurantsToTable(restaurants); 
    }); 
}); 

function createRestaurantArray(apiData) { 
    var restaurants = []; // Preferred syntax over "new Array()" 
    for (var i = 0; i < apiData.length; i++) { 
     restaurants.push({ 
      Name: apiData[i].Name, 
      PhoneNumber: apiData[i].PhoneNumber, 
      PlaceID: apiData[i].PlaceID, 
      Rating: apiData[i].Rating, 
      Website: "" 
    }); 
    return restaurants; 
} 

function addRestaurantsToTable(restaurants) { 
    var html = '<tr>' 
     + '<th>Restaurant Name</th>' 
     + '<th>Restaurant PlaceID</th>' 
     + '</tr>'; 
    for (var i = 0; i < restaurants.length; i++) { 
     html += '<tr>' 
      + '<td>' + restaurants[i].Name + '</td>' 
      + '<td>' + restaurants[i].PlaceID + '</td>' 
      + '</tr>'; 
    } 
    $('#tbl').html(html); 
} 

---

此外，您的fillArray()函數創建單個restaraunt對象和推動該同一對象到所述陣列的for循環的每次迭代。這意味着結果數組將包含相同的對象一遍又一遍，並且該對象將具有循環的最後一次迭代設置的屬性值。