多种功能的JavaScript回调

Question

我目前正在尝试从api控制器获取结果，并将json数据添加到我的razor视图中的表中。 在创建表之前，我用来填充表的数组存在一些问题，但没有被数据填充。 我曾尝试通过回调解决该问题，但我仍然没有经验，也无法从教程中理解。

这是我拥有的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

当您执行以下操作时：

 $.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循环的每次迭代中将同一对象推入数组。 这意味着结果数组将一遍又一遍地包含相同的对象，并且该对象将具有由循环的上一次迭代设置的属性值。

Answer 2

fillArray函数中的所有命令似乎都是同步的（即，代码在完成之前不会继续运行），只要在函数添加数据之前调用此命令就可以了。