如何将数组从Node JS传输到HTML

时间:2018-02-27 21:41:44

标签: javascript node.js express restify

我使用NodeJS按照Microsoft docs上的文档查询Azure SQL数据库中的数据。

现在我有了数据,我打算在纯HTML上使用Plotly.js对其进行可视化。但是,老实说,我是NodeJS上的菜鸟,我不知道如何从Node JS脚本传输数据(我存储在JS数组中)并在HTML上捕获它(更准确地说,抓住它<script></script>标记中的Javascript代码,以便我可以填写Plotly.js可视化文件。)

这将是这样的:

在Node.js脚本上:

  1. 从Azure获取数据(已完成)
  2. 将数据传递给HTML或HTML可以捕获的地方
  3. 在HTML标记中:

    <html>
    <head>
    </head>
    <body>
        <script>
            // CATCH THE DATA RIGHT HERE
    
            // PROCESS THE DATA USING PLOTLY.JS
    
            </script>
    </body>
    </html>
    

    我一直在寻找Restify和ExpressJS,但是我真的没有那么多,而且我没有找到一个能够捕获“html的javascript”数据的例子。

    我不是要求代码(我不想被误解。但是,一些例子会很棒),但我想知道在哪里可以找到类似的东西,工具,库或其他东西这将有助于我实现这一目标。

    谢谢!

3 个答案:

答案 0 :(得分:0)

在C#中,您将拥有一个MVC控制器,该控制器将使用从模型中检索的数据填充模板。您可以使用NodeJS / Express和模板引擎做同样的事情。在这种情况下,您将在发送到浏览器之前使用JavaScript(nodejs)填充模板。

其他选项将使用SPA结构,您可以使用浏览器SPA对数据进行AJAX请求,并从您的nodejs / express REST服务发送该数据。

你可能不会混合使用两者。

如果你想要一个很棒的起点,那就像传统的网页应用程序一样,那么请研究一下Express Application Generator:https://expressjs.com/en/starter/generator.html

如果能为您提供所需的一切,并且文档会直接回答您的问题。

答案 1 :(得分:0)

我建议分两步做你想做的事:

  1. 实现专用端点,使数据可视化为JSON字符串(GET /data/?whatever=1234
  2. 编写Plotly.js脚本以通过AJAX请求所需数据,并在DOM准备好后立即显示。
  3. 最重要的是,您要为数据创建资源,并获取用于获取该资源的URL。绘制数据图只是一个应用程序;未来可能还有很多其他事情要做。

答案 2 :(得分:0)

首先,不是创建服务器并创建API来提供JSON数据,而是可以使用节点fs模块创建一个json文件,如下所示:

const fs = require('fs');

//example of the data you got from the Azure SQL database
const data = [ 1, 2, 3, 4, 5, 6];

fs.writeFileSync('data.json', JSON.stringify(data));

这将在当前目录中创建文件。

然后在您的HTML中,您可以使用jQuery导入该JSON文件:

$.getJSON('data.json',function(data){
     //display your data however you want.    
     console.log(data);
})

它应该工作而不会经历太多的麻烦。

当您想要采用更长的路线时,您可以安装快递并编写一个小型快速服务器,其中包含提供数据的路径端点。