使用Node.js框架将javascript中的数据从Mongodb传递到HTML表格

Question

我在使用node.js时很新颖。现在我试图从MongoDB中获取数据，并使用Javascript + HTML将其显示在表格中。但是，我的表在所有字段中都是未定义的。我认为我通过JavaScript函数b/c阅读数据的方式肯定是错误的，我能够将people.js文件的完整结果直接呈现给网页。先谢谢你！！下面是我的代码：

代码为我people.js文件：

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文件数组结果直接进入网页。所以，你不必通过使用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.js文件中的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）。

如果你想在你的内联脚本分配people到obj你可以试试这样：

script 
    | var obj = #{people}; 

但是，这会导致因为每个项目的_id领域的Unexpected identifier JavaScript错误在people。默认情况下，_id是来自MongoDb的ObjectID十六进制值，因此您必须从docs中删除_id字段，或者向每个doc._id添加引号，以便计算为字符串。在返回数据之前，这一切都必须在person.js中完成。

要明白我的意思有关Unexpected identifier错误，运行此代码片段：

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

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