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

我几乎拥有了一切所需的一切，可以按照我的需要正常工作，我只想念一件事。

这是我的要求：

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”功能给了我：

[ '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
        }]
    },
});

我用大写字母写了文件中缺少的数据。

任何帮助都是必须的。

最佳答案

您应该使用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
                }
            })
   });

关于javascript - 从路由获取数据到脚本标签？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50404673/