mit jQuery abgegrenzt und versprechen Looping

Question

Das ist, was ich zu erreichen versuche,

ich ein sortiertes Array haben, die ich je auf jQuery übergeben. In jedem gibt es einen Ajax-Aufruf, der mir die gewünschten Daten holt und jedes Mal, wenn ich in ein anderes Array stoße (lasst es alle jsonData nennen). Schließlich zeige ich allJsonData an. Problem ist, wenn ich alleJsonData anzeigen, Elemente werden immer inkonsistent angezeigt (nicht alphabetisch/zufällige Reihenfolge). Ich erwarte, dass alle jsonData alphabetisch angezeigt werden (dh AList-Daten zuerst, BList-Daten zweite, CList-Daten dritte usw.). Ich bin neu zu jQuery aufgeschoben und versprechen. Danke im Voraus.

var sortedArray = [AList, BList, CList, DList]; 
var promises = []; 
var allJsonData = []; 
$.each(sortedArray, function (index, value) { 
var dfd = $.Deferred(); 
var url = _spPageContextInfo.webAbsoluteUrl + ('/_api/Web/Lists/GetByTitle(' + "'" + value + "'" + ')/Items? + "SomeFilterParameters"; 

//AJAX CALL HERE// 
.done(
    function (approvedListItems) { 
    if (approvedListItems.d.results.length != 0) { 
     $.each(approvedListItems.d.results, function (i, col) { 
     allJsonData.push(col);//Push into master array 
     }); 
    }//If closed 
    dfd.resolve(allJsonData); 
    } 
);//Done closed 
    promises.push(dfd); 
});//jQuery Each closed 
return $.when.apply($, promises).promise(); 

/**** Ajax-Aufruf ****/

getListItems: function(url) {  
    var dfd = $.Deferred(); 
    $.ajax({ 
     url: url, 
     type: "GET", 
     headers: { 
     "accept": "application/json;odata=verbose", 
     }, 
    success: function (data) { 
     dfd.resolve(data); 
    }, 
    error: function (error) { 
     dfd.reject(sender, args, "Error retrieving items"); 
    } 
    }); 
    return dfd.promise();   
}, 

Answer 1

Ich glaube, Sie etwas so einfach wie dies tun können:

var sortedArray = [AList, BList, CList, DList]; 

Promise.all(sortedArray.map(function(value) { 
    var url = ...; 
    return getListItems(url); 
})).then(function(results) { 
    // results is an array of results from AList, BList, CList, DList in order 
    let allJsonData = []; 
    results.forEach(function(approvedListItems) { 
     allJsonData.push.apply(allJsonData, approvedListItems.d.results); 
    }); 
    // process allJsonData here 
}); 

// simplify getListItems like this 
getListItems: function(url) {  
    return $.ajax({ 
     url: url, 
     type: "GET", 
     headers: { 
      "accept": "application/json;odata=verbose", 
     } 
    }); 
}, 

Die allgemeine Idee dabei ist, dass Sie erhalten eine rohe Liste (ohne die Unterergebnisse darin zu verarbeiten) für jedes Element in sortedArray. Unter Verwendung entweder Promise.all() oder $.when() erhalten Sie die rohen Listen in Reihenfolge. Nachdem Sie alle unformatierten Listen erstellt haben, können Sie sie in der angegebenen Reihenfolge verarbeiten und Ihre allJsonData-Struktur in der richtigen Reihenfolge erstellen.

Auch können Sie das Versprechen Anti-Muster von getListItems() entfernen. $.ajax() gibt bereits ein Versprechen zurück, sodass es nicht notwendig ist, es in ein anderes Versprechen zu verpacken.

könnten Sie wandeln diese $.when() zu verwenden, anstatt Promise.all() wenn Sie wirklich wollte, aber es ist komplizierter $.when() zu verwenden, weil, wie es braucht, Argumente und Ergebnisse zurückgibt.

Außerdem stimmt etwas mit der JavaScript-Zeichenfolgensyntax in Ihrer url-Variablen nicht. Ich weiß nicht, was Sie dort vorhaben, also bin ich mir nicht sicher, was ich vorschlagen soll, aber Sie müssen das auch beheben.