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 объект и нажав тот же объект в массив для каждой итерации для петли. Это означает, что результирующий массив будет содержать один и тот же объект снова и снова, и этот объект будет иметь значения свойств, заданные последней итерацией цикла.