如何将JSON数据从Node js路由传递到html文件中的脚本?

时间:2018-05-09 04:59:16

标签: javascript jquery json node.js mongodb

我正在尝试使用来自mongodb集合的数据填充索引html中的下拉列表。我填充的代码如下所示:

    <script>
        document.addEventListener("DOMContentLoaded", function() {
          for (element in mongoData){
            var option = document.createElement('option');
            option.innerHTML = element;
            option.value = element;
            document.getElementById('Active_Sessions').append(option);
          }
        });
      </script>

在app.js中,我的路线如下:

    app.use("/",(req,res) => {
        res.sendFile(__dirname + "/index.html")
     })

我需要传递JSON对象&#39; mongoData&#39;到这个HTML,我不知道该怎么做。 &#39; mongoData&#39;将是从给定集合收集的一些数据的JSON。

我想到的但尚未实现的一个解决方案是将此mongodata写入文本文件或csv文件或app.js中的类似内容,然后从我的填充脚本中读取该文件。我觉得这会是一种糟糕的形式,但不是很安全。

我想到的另一个选择是尝试连接到填充脚本中的mongoose服务器,但是当我尝试这个时,它没有工作,所以我有点认为这是不可能的。< / p>

我在发布之前已经考虑过的事情是使用res.render()来发送JSON,但是我并不真正理解模板是什么,而不是必须了解所有这些我可以避免这种情况。

这有一个优雅的解决方案吗?

1 个答案:

答案 0 :(得分:1)

您可以通过模板引擎更改服务器中的数据。

或者你可以建立类似的东西。虚拟逻辑:

  1. 使用fs模块读取文件。
  2. 使用正则表达式替换/插入您的内容(例如,从您的对象)。
  3. 将结果发送给客户。
  4. 更新:自定义模板引擎的一个简单示例。

    首先是一个简单的html文件 - index.html(请注意$ replace_me):

    <html>
      <body>
        <div class="circle">
          $replace_me
    
          <div class="square">
            something else
          </div>
        </div>
      <body>
    </html>

    在我们的节点服务器中,我们可以这样做:

    var fs = require('fs');
    
    //used sync for clean demo, use async in production
    var _html_cont = fs.readFileSync('index.html', {encoding: 'utf-8'});
    
    //dynamic content to replace
    var _repl = "<div>I am new!</div>";
    
    //actually replace it
    var _im_regex = new RegExp("\\$replace_me", "gm");
    _html_cont = _html_cont.replace(_im_regex, _repl);
    
     //send result to client
     res.writeHead(200, { 'content-type': 'text/html' });
     res.write(_html_cont);
     res.end();