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

执行以下操作时：

 $.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函数中的所有命令似乎都是同步的（即代码在完成之前不会继续运行）所以只要在函数添加数据之前调用它就应该没问题。

JavaScript回调多个函数

2 个答案: