如何制作动态卡片并遍历ejs中的数组

Question

我是 node js 和 ejs templating 的新手。我正在尝试建立一个网站。我需要根据数据库中的计数制作动态配置文件卡。我正在使用mysql 和sequelize。当我使用FindAndCountAll 时，我有一个数组

{
    count: 3,
    rows: [
        patient_data {
            dataValues: [Object],
            _previousDataValues: [Object],
            _changed: Set(0) {},
            _options: [Object],
            isNewRecord: false
        },
        patient_data {
            dataValues: [Object],
            _previousDataValues: [Object],
            _changed: Set(0) {},
            _options: [Object],
            isNewRecord: false
        },
        patient_data {
            dataValues: [Object],
            _previousDataValues: [Object],
            _changed: Set(0) {},
            _options: [Object],
            isNewRecord: false
        }
    ]
}
    

我从 console.log 'gen' 从这个 api 得到的

Login: async(req,res,next) => {

    try {
        if(!req.body){
            throw new Error(" sorry no data");
        }

        const { name, password} = req.body;
        console.log("b",name)
        const user= await models.machine.findOne({
            where:{
                name:m_name
            },
        });


        if (user) {
            let isPassWordCorrect =  await bcrypt.compare(password,user.password)
            if(isPassWordCorrect){

                const gen= await models.patient_data.findAndCountAll({
                    attributes:[
                        "p_id","gender","name",
                    ],
                    where:{
                        m_name:machine_name
                    }
                });

                var arr = gen;
                console.log(arr,"ae")

                res.render('dash',{ posts: gen })

                console.log(posts)

            } else {
                res.redirect('/Login')
            }
        } else {
            res.status(400).json({
                message:"unsuccess , an errror occured",
            })
        }

    } catch (err) {
        res.status(400).json({
            message:err.toString(),
        });
    }
}

当我使用FindAll 时，我会得到这个带有数据值的数组。

[
    patient_data {
        dataValues: { p_id: '054', gender: 'M', name: 'Pau' },
        _previousDataValues: { p_id: '054', gender: 'M', name: 'Pau' },
        _changed: Set(0) {},
        _options: {
            isNewRecord: false,
            _schema: null,
            _schemaDelimiter: '',
            raw: true,
            attributes: [Array]
        },
        isNewRecord: false
    },
    patient_data {
        dataValues: { p_id: '075', gender: 'M', name: 'Dav' },
        _previousDataValues: { p_id: '075', gender: 'M', name: 'Dan' },
        _changed: Set(0) {},
        _options: {
            isNewRecord: false,
            _schema: null,
            _schemaDelimiter: '',
            raw: true,
            attributes: [Array]
        },
        isNewRecord: false
    },
    patient_data {
        dataValues: { p_id: '75', gender: 'M', _name: 'vin R' },
        _previousDataValues: { p_id: '75', gender: 'M', _name: 'vin R' },
        _changed: Set(0) {},
        _options: {
            isNewRecord: false,
            _schema: null,
            _schemaDelimiter: '',
            raw: true,
            attributes: [Array]
        },
        isNewRecord: false
    }
]


    

问题是我无法根据计数创建动态卡片并将其显示在我的ejs 页面中。我正在使用express、ejs、mysql 和sequelize。我需要尽可能地渲染数组，但是捕获渲染的值并将其显示在我的ejs 页面上有点令人困惑。有没有办法遍历这个数组并显示每张卡片中的值。谁能帮帮我。

提前致谢

Answer 1

问题可能是由于将模型实例发送到ejs 渲染器。试试这个查询：

const gen = await models.patient_data.findAndCountAll({
    attributes:[
      "p_id","gender","name",
    ],
    where:{
      m_name:machine_name
    },
    raw: true
  });

raw option 只会返回数据，更适合ejs。然后，您可以在 ejs 文件中执行以下操作：

<h1>
    Patient Data Test
</h1>
<ul>
    <% locals.posts.rows.forEach(function (patient) { %>
        <li class="patient-data">
            <div>Name: <%= patient.patient_name %></div>
            <div>Gender: <%= patient.gender %></div>
        </li>
    <% }); %>
</ul>

而且，虽然我在 CSS 方面不是那么出色，但可能是这样的：

* {
    font-family: arial, helvetica, verdana, sans-serif;
}

ul {
    list-style-type: none;
}

.patient-data {
    box-shadow: 0 0 15px #ccc;
    border-radius: 5px;
    padding: 1rem;
    line-height: 1.5rem;
}

.patient-data:not(:first-child) {
    margin-top: 1.5rem;
}