Javascript 在车把中显示来自MongoDB的数据_Javascript_Database_Mongodb_Web_Handlebars.js

Javascript 在车把中显示来自MongoDB的数据

javascript database mongodb web

Javascript 在车把中显示来自MongoDB的数据,javascript,database,mongodb,web,handlebars.js,Javascript,Database,Mongodb,Web,Handlebars.js,我有两个.hbs，其中一个是分部文件，特定分部包含用于显示数据库数据的变量这是index.hbs： <!DOCTYPE html> <html> <head> <title> PayApp </title> <link href="https://fonts.googleapis.com/css?family=Roboto|Rubik&display=swap" rel="s

我有两个.hbs，其中一个是分部文件，特定分部包含用于显示数据库数据的变量

这是index.hbs：

<!DOCTYPE html>
<html>
<head>
    <title> PayApp </title>
    <link href="https://fonts.googleapis.com/css?family=Roboto|Rubik&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/css/index.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/js/index.js"></script>

</head>
<body>
    <div id="container">
        <h1> PayApp </h1>

        <div id="content">
            <form id="payment_form">
                <input type="text" name="name" id="name" class="field" placeholder="Name"> <br>
                <input type="number" name="refno" id="refno" class="field" placeholder="Reference Number"> <br>
                <input type="number" name="amount" id="amount" class="field" placeholder="Amount"> <br>
                <input type="button" name="submit" id="submit" value="SUBMIT">
            </form>

            <p id="error"></p>

            <!--
                TODO: Display all transactions here. Each transaction should be retrieved from the database and displayed through rendering `../partials/card.hbs`.
            -->
            <div id="cards">
                {{this.name}}
            </div>
        </div>
    </div>
</body>
</html>


付费应用
付费应用







{{this.name}}

这是部分卡。hbs：

<div class="card">
    <img src="/images/icon.webp" class="icon">
    <div class="info">
        <p class="text"> {{name}} </p>
        <p class="text"> {{refno}} </p>
        <p class="text"> Php {{amount}} </p>
    </div>
    <button class="remove"> X </button>
</div>


{{name}
{{refno}
Php{{amount}
X

因此，如果我阅读正确，您将遍历一组

卡片

数据，并希望以粘贴在下面的部分的形式输出每个

卡片

。我已经有一段时间没有玩模板了，但我相信你需要一些类似的东西：

{{#each cards}}
  {{> cardPartial name=name refno=refno amount=amount}}
{{/each}}

当您的数据传入时，如：

{
  cards: [
    {
      name: "cardName1",
      refno: "1",
      amount: "$300"
    },
    {
      name: "cardName2",
      refno: "2",
      amount: "$200"
    },
  ]
}

尝试类似的方法，看看如果简化部分输出只是为了查看数据会发生什么？让我知道这是否有帮助

您的后端API是否使用来自mongoDB的JSON数据进行响应？如果您在Postman或API客户端中测试过它？@mcshakes是的！数据存储正确。在下面发布了一个答案，但我也想知道您的“this.name”中的“this”输出的是什么