【问题标题】:Render HTML Page with Json data使用 Json 数据渲染 HTML 页面
【发布时间】:2019-04-07 09:56:59
【问题描述】:


我有这个问题:
我有一个使用 router.get (Express) 服务的获取请求。 在这个函数中,我用来从我的 sql 数据库中获取数据。现在我有了 JSON 格式的数据。
我想将 json 数据传递给车把,并将响应发送给客户端,数据仅在 html 内呈现(呈现完全在服务器端进行)。
也许我有点困惑:
我想做的事情有解决方案吗?


快递:

//CHAT
router.get('/chatlist', ensureAuthenticated, (req,res)=>{
    let mittente = req.user.id;
    findUsersChat(mittente)
    .then(Chats=>{
        getChatData(Chats,mittente).then(ChatList=>{
            console.log("Lista2: " +ChatList);
            var obj=JSON.parse(ChatList);
            res.render('chatlist') ;
        })
        .catch(err=>console.log(err))

    });

})


车把

<section id="gigs" class="container">
    <h1>Chats Available</h1>

        {{#each obj}}
        <h1>{{Nome}}</h1>
        <div class="form-group">
          <form method="POST" action="/users/chat">  
            <p>Utente numero : {{@index}}</p>
            <label for="name" value={{Nome}}>{{Nome}}</label>

          </form>

        </div>
        {{/each}}
  </section>

【问题讨论】:

  • 看起来您没有将 obj 数据传递给您的视图。你可以试试:res.render('chatlist', {obj: Chats})
  • 它有效。我能问你 {obj:Chats} 做什么吗?结果是只显示索引。为什么?请问我该如何解决以及如何显示{{nome}}?@Mihai
  • 你能把这个命令的输出贴出来吗:console.log("Lista2: " +ChatList);基于此,我可以写出完整的答案
  • @Mihai Lista2: [{"id":7,"Nome":"ciccio","Cognome":"sasiccio","DataNascita":null,"Professione":null,"Email ":"sasicc@gmail.com","密码":"$2a$10$Wi5SELvNIMDcchE3O2FcvOUcpt4EJOdbC8lowzL/7w8dEnGtTP6ZK"},{"id":8,"Nome":"Dio","Cognome":"Porco","DataNascita ":null,"Professione":null,"Email":"porc0di0@gmail.com","密码":"$2a$10$BfKc8sSLrU7JZFw/JZ1iHe5Sg.xSlfWmpOIih9RCrV35c0xHyjWna"}]

标签: node.js express handlebars.js


【解决方案1】:

您似乎没有将数组 (ChatList) 传递给您的视图。 您可以通过将代码更改为:

...
        getChatData(Chats,mittente).then(ChatList=>{
            console.log("Lista2: " +ChatList);
            res.render('chatlist', {objects: ChatList}) ;
        })
...

通过这样做,一个数组“对象”将在您的视图中可用,您可以对其进行迭代。

您的页面现在应该变成:

<section id="gigs" class="container">
    <h1>Chats Available</h1>

        {{#each objects}}
        <h1>{{./Nome}}</h1>
        <div class="form-group">
          <form method="POST" action="/users/chat">  
            <p>Utente numero : {{@index}}</p>
            <label for="name" value={{./Nome}}>{{./Nome}}</label>

          </form>

        </div>
        {{/each}}
  </section>

【讨论】:

  • 周末风云人物!我只需要改变 {objects:obj} ,但你真的帮了我!谢谢你:)
  • 比喻。在博卡卢波!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-03-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多