node.js：将列表从节点 js 代码传递到 hbs html 页面并不总是有效（有时给我输出，有时是空的，没有输出）

Question

我的目标很简单，只需将这个变量和列表从我的 node.js 代码传递到我的 html .hbs 文件，使用：

res.render('justreadthefentemp', {"personList": personList,thewinrnicknm,thewinrid,thegmsts,gmendhtml,cllr,gmdate});

每件事都没有错误，但列表部分仍然存在问题我的代码可以成功推送数据

personList.push(person);

我可以用 console.log 代码

检查

console.log('her the lenght of the list',personList.length);

我可以看到我网页上的输出并非一直都在显示，有时我会在 html 网页上看到整个变量和列表输出，有时我只看到变量但列表部分是空的，但我仍然可以看到 console.log 输出说我的列表中存在数据但是在我的 html 页面上没有来自列表输出的数据

my whole node.js code:

app.get('/theviewerpage/:thgmhshid([0-9]{1,9})', function (req, res, next) {

    var tgmhashpage = req.params.thgmhshid;
    var personList = [];
    var thegmsts;
    var gmendhtml;
    var returnflsortrue;
    var cllr;
    var uso;
    var thewinrnicknm;
    var thewinrid;
    var thegmsts;

    if (req.user === undefined) {
        return res.redirect('/theviewerpageforpublic/' + tgmhashpage + '');
    } else {
        uso = req.user.id;
        console.log('usohoooo');
    }

    connection.query("SELECT * FROM moves_viewer_list WHERE Gamehash = '" + tgmhashpage + "' ORDER BY `moves_viewer_list`.`gamestartdate` ASC ", function (err, rows, result) {
        console.log('oh mysql');
        for (var i = 0; i < rows.length; i++) {
            gmdate = datetime.create(rows[i].gamestartdate).format('Y/m/d H:M:S');

            thewinrnicknm = rows[i].whowin;
            thewinrid = rows[i].whowinid;
            thegmsts = rows[i].gameending;
        }

        console.log('yes her ???');
        connection.query("SELECT * FROM moves_viewer WHERE gamehash = '" + tgmhashpage + "' ORDER BY `moves_viewer`.`movedate` ASC ", function (err, rows, result) {
            console.log('duhhhh');
            for (var i = 0; i < rows.length; i++) {
                console.log("hghghgh");

                var person = {
                    'The_Move': rows[i].TheMoveString,
                    'the_whomov': whomov,
                    'the_i': i,
                    'themovedate': "This Move Date:" + datetime.create(rows[i].movedate).format('Y/m/d H:M:S')
                }
                personList.push(person);
                console.log('her the lenght of the list', personList.length);
            }
        })

        res.render('justreadthefentemp', {
            "personList": personList,
            thewinrnicknm,
            thewinrid,
            thegmsts,
            gmendhtml,
            cllr,
            gmdate
        });

    })

});

对于其他变量，我只是在 html 代码的任何地方写了这行简单的代码，它一直有效，没有问题

{{thewinrid}} 
{{thewinrnicknm}}
//etc..

所以我不知道有什么问题？

Answer 1

将 res.render 放在回调中，在 for 循环之后

Answer 2

您的问题如下

        connection.query("SELECT * FROM moves_viewer WHERE gamehash = '" + tgmhashpage + "' ORDER BY `moves_viewer`.`movedate` ASC ", function (err, rows, result) {
            console.log('duhhhh');
            for (var i = 0; i < rows.length; i++) {
                console.log("hghghgh");

                var person = {
                    'The_Move': rows[i].TheMoveString,
                    'the_whomov': whomov,
                    'the_i': i,
                    'themovedate': "This Move Date:" + datetime.create(rows[i].movedate).format('Y/m/d H:M:S')
                }
                personList.push(person);
                console.log('her the lenght of the list', personList.length);
            }
        })

        res.render('justreadthefentemp', {
            "personList": personList,
            thewinrnicknm,
            thewinrid,
            thegmsts,
            gmendhtml,
            cllr,
            gmdate
        });

    })

});

因此，当您调用 connection.query 时，结果是 async 操作，当结果准备就绪时调用回调函数。但不是在回调中渲染模板，而是在调用 connection.query

后立即渲染它

现在，当渲染调用发生时，personList 列表可能未完全填充。因此，您在结果中看到的增量。您需要了解 node.js 基本上是异步的，因此您需要了解如何以及在何处使用数据。一旦你像下面这样更新电话

        connection.query("SELECT * FROM moves_viewer WHERE gamehash = '" + tgmhashpage + "' ORDER BY `moves_viewer`.`movedate` ASC ", function (err, rows, result) {
            console.log('duhhhh');
            for (var i = 0; i < rows.length; i++) {
                console.log("hghghgh");

                var person = {
                    'The_Move': rows[i].TheMoveString,
                    'the_whomov': whomov,
                    'the_i': i,
                    'themovedate': "This Move Date:" + datetime.create(rows[i].movedate).format('Y/m/d H:M:S')
                }
                personList.push(person);
                console.log('her the lenght of the list', personList.length);
            }

            res.render('justreadthefentemp', {
                "personList": personList,
                thewinrnicknm,
                thewinrid,
                thegmsts,
                gmendhtml,
                cllr,
                gmdate
            });
        })

这确保在变量 personList 完全填充数据后完成渲染

node.js：将列表从节点 js 代码传递到 hbs html 页面并不总是有效（有时给我输出，有时是空的，没有输出）

node.js: passing list from node js code to hbs html page not always work(sometimes gives me outputs and somtimes empty and no outputs)

arraylist

node.js

express

handlebars.js