从路由获取数据到脚本标签？

Question

我几乎拥有让一切正常工作所需的一切，我只缺少一件事。

这是我的获取请求：

app.get('/:username/tasks', function (req, res) {

    if (req.session.user === req.params.username) {
        var photo;
        countList = [],
            categoryList = [];

        db.User.findOne({
            where: {
                username: req.session.user
            }
        }).then(function (info) {
            console.log(info.dataValues.picURL);
            photo = info.dataValues.picURL
        })

        db.Tasks.findAndCountAll({
            attributes: ['category'],
            where: {
                UserUsername: req.session.user
            },
            group: 'category'
        }).then(function (result) {
            for (var i = 0; i < result.rows.length; i++) {
                categoryList.push(result.rows[i].dataValues.category);
                countList.push(result.count[i].count);
            }
            console.log(categoryList);
            console.log(countList);
        })

        db.Tasks.findAll({
            where: {
                UserUsername: req.params.username
            }
        }).then(function (data) {
            res.render('index', {
                data: data,
                helpers: {
                    photo: photo,
                    countList: countList,
                    categoryList: categoryList
                }
            })
        });
    } else {
        res.redirect('/');
    }
})

“findAndCountAll”函数在 return 中给出了这个：

[ 'Health', 'Other', 'Recreational', 'Work' ] [ 5, 1, 1, 1 ]

这正是我需要的两个数组。问题是我需要将这些值传递到 javascript 脚本标记中。当我使用“Tasks.findAll”中的辅助函数将它们发送到 index.handlebars 时，我得到了值。问题是，如果我添加一个脚本标签并将值传递到该脚本标签中，它就不起作用。我还能如何将这些值放入该脚本标记中？这是最后一块拼图。

这是我要将数据放入的 js 文件：

var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: [MISSING DATA HERE],
        datasets: [{
            label: '# of Votes',
            data: [MISSING DATA HERE],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
            ],
            borderWidth: 1
        }]
    },
});

我在文件中丢失数据的地方写了大写字母。

非常感谢任何帮助。

Answer 1

您应该运行使用 Promise.all 并行查询所有这些查询，并在所有查询完成后呈现图表

const userPromise =  db.User.findOne({
                       where: {
                         username: req.session.user
                       }
                     });

const tasksWithCountPromise = db.Tasks.findAndCountAll({
                attributes: ['category'],
                where: {
                    UserUsername: req.session.user
                },
                group: 'category'
            }).then(function (result) {
                for (var i = 0; i < result.rows.length; i++) {
                    categoryList.push(result.rows[i].dataValues.category);
                    countList.push(result.count[i].count);
                }
                return { countList, categoryList };
            });

const allTasksPromise = db.Tasks.findAll({
                where: {
                    UserUsername: req.params.username
                }
            });

Promise.all(userPromise, tasksWithCountPromise, allTasksPromise)
 .then(([user, tasksWithCount, allTasks]) => {
     res.render('index', {
                data: allTasks,
                helpers: {
                    photo: user.dataValues.picURL,
                    countList: tasksWithCount.countList,
                    categoryList: tasksWithCount.categoryList
                }
            })
   });

从路由获取数据到脚本标签？

Getting data into script tag from route?

javascript

handlebars.js

chart.js

express-handlebars