Array speichert zufällige Reihenfolge jedes Mal durch Schleife

Question

Ich versuche, mehrere Objekte in einem Array zu speichern, um dann in der Reihenfolge gerendert werden.

Mein Prozess ist wie folgt:

var allOdds = []; 
var count = 0; 
// ===================================== 
/* Database Config and Error Handling */ 
// ===================================== 
tools.databaseConnect(); 
// Get option number from database 
connection.query("SELECT * FROM OptionNumbers ORDER BY id", function(err, rows, fields) { 
    console.log("CALL FROM DATABASE"); 
    var totalRows = rows.length; 

    rows.forEach(function(key, value) { 

     request('http://url/for/data' + key.number, function(error, response, body) { 

      if (!error && response.statusCode == 200) { 

       // Parse XML response 
       if (body.includes('selection')) { 
        var odds1 = $(body).find('selection').eq(0).attr('odds'); 
        var odds2 = $(body).find('selection').eq(1).attr('odds'); 

        var obj = { 
         team1odds: odds1, 
         team2odds: odds2 
        }; 
        allOdds.push(obj); 

       } else { 
        var obj = { 
         team1odds: 0.00, 
         team2odds: 0.00 
        }; 
        allOdds.push(obj); 
       } 



       if ((count + 1) === totalRows) { 
        // Render index with results 
        res.render('index', { 
         title: 'Best Bets', 
         time: tools.DisplayCityTime('+12'), 
         completeOdds: allOdds 
        }); 
       } 
       count++; 

      } //end if || Nothing Odds Found 

     }); 
    }); 

}); 

Die Reihenfolge der „key.number“ aus der Datenbank app.js konsistent ist, aber die Reihenfolge des Prozesses die Objekte scheint Speicherung zufällig?

<% completeOdds.forEach(function(sortedOdds) { %> 
     <div class="rowContainer" style="width:500px; padding:20px; margin-bottom:20px; border:2px solid grey;"> 
      <p style="width:50%; float:left;"> 
       <%= sortedOdds.team1odds %> 
      </p> 
      <p style="width:50%; float:left;"> 
       <%= sortedOdds.team2odds %> 
      </p> 
      <div style="clear:both; width:100%;"></div> 
     </div> 
<% }); %> 

gerenderte Ergebnis Reihenfolge ist zufällig wie unten Beispiel 1 - 3 - 2, 3 - 1 - 2, etc ...

Ich möchte von der API abzurufen. Dann speichern Sie jedes in einem Array, um auf der Seite in der Reihenfolge wiedergegeben werden, in der sie abgerufen wurden.

Answer 1

Das Problem ist, dass Sie nicht sicher sein können, welche Anfrage in welcher Reihenfolge erfüllt wird. Stellen Sie sich vor, Sie laden drei separate Webseiten nacheinander in separaten Registerkarten. Es gibt keine Garantie, dass sie das Laden in der Reihenfolge beenden, in der Sie sie geöffnet haben.

Die Verwendung von Javascript Versprechen ist eine Möglichkeit, dies zu beheben. Ich erstelle ein leeres Array namens promises. Für jede Anfrage erstellen Sie ein neues Versprechen. Dieses Versprechen wird basierend auf dem Ergebnis request(...) "aufgelöst" oder "abgelehnt". Dieses Versprechen wird nun in der von Ihnen gewünschten Reihenfolge an das Array promises gesendet.

Sobald alle Versprechen im Array aufgelöst wurden, wird Promise.all(promises) aufgelöst. Der aufgelöste Wert wird ein Array sein, das die aufgelösten Werte der vorherigen Anfragen enthält.

var promises = []; 

rows.forEach(function (key, value) { 
    var p = new Promise(function (resolve, reject) { 
     request("...", function (error, response, body) { 
      if (error) { 
       //handle error 
      } else { 
       resolve(body); 
      } 
     }); 
    }); 
    promises.push(p); 
}); 

//this function will not be called until all requests have returned 
Promise.all(promises).then(function (resp) { 
    //these will be in order 
    console.log(resp[0]); 
    console.log(resp[1]); 
    console.log(resp[2]); 
});