JQuery, wie man mit Rückkehr wartet, bis getJSON fertig ist? (Web API)

Question

Ich mache ein Projekt, das Web-API und JQuery enthält. Eine der HTML-Seiten muss Store und den Namen des Managers des Shops anzeigen.

Jedes Geschäft hat:
ID,
Storename,
ManagerID.

Jeder Manager hat:
ID,
ManagerName.

Der Speicher enthält den Namen des Managers nicht direkt.

Der Code sieht wie folgt aus:

// There is a html code with <table id='table'>...</table> before the script. 
var storesUri = 'api/stores' //The stores uri 
$(document).ready(function() { 
    $.getJSON(storesUri) 
     .done(function(data) { 
      $.each(data, function(key, item) { 
       $('#table).append(
        '<tr>' + 
        '<td>' + item.ID + '</td>' + 
        '<td>' + item.storeName + '</td>' + 
        '<td>' + findManagerNameByID(item.ManagerID) + '</td>' + //get the manager name by the manager id 
        '</tr>'); 
      }); 
     }); 
}); 

var managersUri = 'api/managers' //The managers uri 
function findManagerNameByID(id) { 
    var res = 'N/A'; 
    $getJSON(managersUri + '/' + id) 
     .done(function(data) { 
      res = data.ManagerName; //puts in res the fit manager name 
     }) 
     .fail(function(jqXHR, testStatus, err) { 
      res = 'None'; 
     }); 
    //alert('1'); 
    return res; 
}  

Nach diesem Code der Tabelle beinhalten muss für jede Speicherung der Filial-ID, Shop-Namen und den Filialleiter Namen. Stattdessen enthält die Tabelle für jedes Geschäft die Geschäfts-ID, den Geschäftsnamen und 'N/A' (der Standardwert von res).

Die Sache ist, dass, wenn ich den Code "alert ('1') hinzufügen;" kurz vor der Rückkehr (Sie können es in Commant sehen) wird die Tabelle in Ordnung sein und es wird für jedes Geschäft die Geschäfts-ID, den Geschäftsnamen und den Filialleiter enthalten, wie ich wollte.

Ich denke, das ist vor dem 'Rückkehr res;' Zeile passiert irgendwie vor dem 'res = data.ManagerName;' Linie (ich denke, weil, wenn der Code die kleine Verzögerung der Warnung vor der Rückkehr hat, ist alles in Ordnung). Wie kann ich sicherstellen, dass die Tabelle ohne Warnung korrekt ausgefüllt wird? danke.

Answer 1

Anstatt die Rückgabe in eine Variable zu setzen, können Sie einfach von done zurückkehren oder fehlschlagen. Ich denke, dass "None" das gleiche wie "N/A" sein wird, was die Notwendigkeit für die Var. So dass ein Teil des Codes wird wie folgt aussehen

$getJSON(managersUri+'/'+id) 
 
      .done(function(data){ 
 
       return data.ManagerName; //puts in res the fit manager name 
 
      }) 
 
      .fail(function(jqXHR, testStatus, err){ 
 
       return 'None'; 
 
      });

Answer 2

Das Problem hierbei ist, dass die Anforderung (getJSON) wird asynchron ausgeführt, und so leitet der Code die Anforderung und registriert den Callback-Handler für jedes Ergebnis und gibt dann den aktuellen Wert res (was 'N/A' ist) zurück.

Sie können es zwingen, synchron zu laufen, aber möglicherweise nicht diese Bequemlichkeitsfunktion verwenden. Ich erinnere mich nicht an die genaue Syntax dafür, aber die jQuery-Dokumente sind ziemlich gut. Wenn getJSON keinen Synchronisierungsmodus hat, können Sie immer zur ajax-Funktion zurückkehren, die intern von getJSON verwendet wird.

Answer 3

Die Funktion getJSON asynchron ist so empfehle ich Ihnen, Ihre Funktion ändern von:

function findManagerNameByID(id){ 

zu:

function findManagerNameByID(id, callback){ 

Also, wenn der getJSON einen Wert zurückgibt (fertig) Sie können es verwenden, in Ihrer Callback-Funktion wie in:

var managersUri='api/managers' //The managers uri 
function findManagerNameByID(id, callback){ 
    var res = 'N/A'; 
    $getJSON(managersUri+'/'+id) 
    .done(function(data){ 
    // use the callback 
    res=data.ManagerName; //puts in res the fit manager name 
    callback(res); 
    }) 
    .fail(function(jqXHR, testStatus, err){ 
    res='None'; 
    }); 
} 


// when you call your function pass the callback.... 
findManagerNameByID('thisId', function(res) { 
    // use your res value right now 
})