从路由获取脚本标记的数据?

时间:2018-05-18 05:59:19

标签: javascript handlebars.js chart.js express-handlebars

我几乎拥有所需的一切,让我的一切正常运作,我只想错过一件事。

这是我的要求:

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

我用大写字母写了丢失数据在文件中。

任何帮助都很有必要。

1 个答案:

答案 0 :(得分:2)

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