每次通过循环存储随机顺序的数组

Array storing random order each time through loop

本文关键字：随机 顺序 数组 存储 循环      更新时间：2023-09-26

我正试图将多个对象存储到一个数组中，然后按顺序渲染出。

我的流程如下：

app.js

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
        });
    });
});

数据库中"key.number"的顺序是一致的，但存储对象的过程的顺序似乎是随机的？

<% 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>
<% }); %>

呈现的结果顺序是随机的，例如下面的示例1-3-2、3-1-2等…

我想从API检索。然后将每个存储到一个数组中，按照检索顺序在页面上呈现。

问题是您无法确定哪个请求以何种顺序得到满足。想象一下，在单独的选项卡中一个接一个地加载三个单独的网页。无法保证它们会按照您打开它们的顺序完成加载。

使用javascript promise是解决这一问题的一种方法。我创建了一个名为promises的空数组。对于每个请求，您都会创建一个新的Promise。此承诺将根据request(...)的结果"解决"或"拒绝"。这个promise现在按照您想要的顺序被推送到数组promises。

一旦数组中的所有promise都被解析，Promise.all(promises)就会被解析。它的解析值将是一个数组，其中包含以前请求中的解析值。

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]);
});
相关文章：