web-dev-qa-db-ja.com

Jade / Pugでオブジェクトの配列をレンダリングします

Pug/Jadeテンプレート用のものがあまりないので、ここで試してみます。私はイテレーションのドキュメントとこのリンクを読んでいます ここ 。

私はNode.js、Express、およびpugを使用しています。これまでのところ、ユーザーに関するデータを収集する関数サーバー側がいくつかあります（学校のプロジェクトとして偽の出会い系サイトを構築しています）。したがって、コードサーバー側は次のようになります。

router.post('/matchaSearch', function (req, res) {
  matchaSearch(pool, session.uniqueID)
     .then((results) => {

       res.results = JSON.stringify(results)
       console.log('result', results)
       res.render('./userMatch', {res})
       })
     .catch((err) => {
       console.error('error', err)
       res.status(500).send("we don't have any suggestions for you so far")
       })
     })

Itermにresultsを記録でき、すべてのデータがここにありますが、クライアント側に関しては少し異なります。

h1
 |Here are your suggestions
script.
 console.log(!{res.results}[0].username)
ul
  for username in res.results
    li= username

ここでは、ブラウザのコンソールのres.resultsから最初のユーザー名をログに記録できますが、私のページでは、liがレンダリングしています：

ここにあなたの提案があります

。[

。{

。」

。私

.d

。」

。：

.3

.3

ここで私の問題を理解できますか？オブジェクトの配列からのすべての文字が表示されています。ユーザー名をリンクとして表示したかったので、提案されたユーザーを含む提案ページを表示できます。

Jqueryを使用してそのようなhtmlをliにレンダリングし、それを呼び出すことができるかどうか疑問に思っていましたが、ここでも壁に直面しています。どんな助けでも大歓迎です！ありがとう。

javascriptnode.jsexpresspug
6
pkerckhove

{res}はjavascriptには意味がありません。キーと値のペアを含むオブジェクトをテンプレートに提供する必要があります。

res.render('./userMatch', {results: results})

そして、テンプレートのループは次のようになります。

ul
  for item in results
    li= item.username
9
dNitro
    h1
     |Here are your suggestions
    script.
     console.log(!{res.results}[0].username)
    ul
      for username in res.results
        li= username.username

ユーザー名はオブジェクトであり、あなたはその全体を印刷していると思います

3
Asif Saeed