Node.jsフレームワークを使用してJavaScriptを使用してMongodbからHTMLテーブルにデータを渡す

Question

私はnode.jsを使用することで全く新しいです。今私はMongoDBからデータを取り出し、Javascript + HTMLを使ってテーブルに表示しようとしています。しかし、私のテーブルは、すべてのフィールドで未定義の値が設定されています。私は何かが間違っていると私はJavascript関数b/cを介してデータを読んでいると思う私はpeople.jsファイルから完全な結果を直接Webページにレンダリングすることができます。前もって感謝します！！私people.jsファイルの

コード：：私のWebページを取り込むだ

exports.getPeople = (req, res) => { 
    People.find((err, docs) => { 
    if (err) { return next(err); } 
    if (docs != null){ 
    console.log(docs.length) 
    docs.forEach(function(docs, index) { 
    console.log(index + " key: " + docs.name) 
     }); 
    res.render('people', { people: docs }); 
    } 
    else{ 
    res.render('people', { people: docs() }); 
    } 
}); 
}; 

私のJavascript + HTMLの下の私のコードです。

script(type='text/javascript', src='http://code.jquery.com/jquery-1.9.1.js', charset='UTF-8') 
    script. 
    $(document).ready(function(){ 
     var obj= '$(people)' 

     var tbl = "<table>" 
     var content=""; 
     for(i=0; i<obj.length;i++){ 
     content += 
      '<tr>+<td>' +obj[i]["name"]+ 
      '</td><td>'+obj[i]["type"]+ 
      '</td><td>'+obj[i]["min_hours"]+ 
      '</td><td>'+obj[i]["max_hours"]+ 
      '</td><td>'+obj[i]["email"]+ 
      '</td><td>'+obj[i]["phone_number"]+ 
      '</td><td>'+ '<input type="button" value = "Update" onClick="Javacsript:deleteRow(this)">' + 
      '</td><td>'+'<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">'; 
      '</td></tr>'; 
     } 
     content += "</table>" 
     $('#myTableData').append(content); 
    }); 

Answer 1

前述のとおり、people.jsファイルの配列結果をWebページに直接レンダリングできます。したがって、jQueryを使用してJavaScript関数を使用してデータを読み取る必要はありません。テンプレートエンジン言語はJavaScriptの上に構築され、ここで達成しようとしていることを実行するための多くのメソッドと機能をサポートしています。したがって、たとえば、あなたがあなたのテーブルを構築するためにeach..inのような反復法を使用することができます（ドキュメントを参照してください - Iteration）：

// ... 

body 
     table(id="myTableData") 

     // for each person in the people array (from people.js) ... 

     each person in people 

      // build a new table row 
      tr 

      // insert table data 
      td #{person.name} 
      td #{person.type} 
      td #{person.min_hours} 
      td #{person.max_hours} 
      td #{person.email} 
      td #{person.phone_number} 

      // add the update and delete buttons 
      td 
       input(type="button" value = "Update" onclick=" ... ") 
       input(type="button" value = "Delete" onclick=" ... ") 

      // move to next person in the people array ... 

問題

var obj = '$(people)'あなたが得るように動作しません。期待する。 objはファイルのpeopleアレイを保持して、アレイ内の各オブジェクトをループすることができますが、これは起こっていません。 objは実際には長さ9の文字列値なので、forループは9つの文字列値（オブジェクトではない）を評価します。このため、すべてのフィールドはundefinedです。

は実行、私が何を意味するか、このコードスニペットを表示するには：

var obj = '$(people)'; 
 

 
for (var i = 0; i < obj.length; i++){ 
 

 
    console.log(obj[i]); 
 
    console.log(obj[i]["name"]); 
 
    
 
}

$(people)がオブジェクトに評価されない理由は、親要素が、script.にその下のすべての原因となる主な原因でありますプレーンテキストに評価します。タグの後にある.は、テンプレートエンジンにプレーンテキストを表示させます（ドキュメント：Block in a Tag参照）。

あなたは、インラインスクリプトでobjにpeopleを割り当てるしたい場合は、この方法を試してください：

script 
    | var obj = #{people}; 

しかし、これは各アイテムであるため_idフィールドのUnexpected identifier JavaScriptエラーが発生しますpeople。デフォルトで_idはMongoDbからのObjectID 16進値ですので、docsから_idフィールドを削除するか、doc._idに引用符を追加して文字列にする必要があります。データを返す前に、これはすべてperson.jsで行う必要があります。

は、このコードスニペットを実行し、Unexpected identifierエラーについて私が何を意味するかを確認するには：

// works 
 
var obj = { _id: '583ab33cdaf857b543c76afe', 
 
    name: 'john'}; 
 

 
// Error: Unexpected identifier 
 
var obj = { _id: 583ab33cdaf857b543c76afe, 
 
    name: 'john'};