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

【问题标题】：How to transfer arrays from Node JS to HTML如何将数组从 Node JS 传输到 HTML
【发布时间】：2018-04-30 04:22:26
【问题描述】：

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

现在我有了数据，我打算在纯 HTML 上使用 Plotly.js 将其可视化。但是，老实说，我是 NodeJS 的菜鸟，我不知道如何从 Node JS 脚本传输数据（我存储在 JS 数组中）并在 HTML 上捕获它（更准确地说，在<script></script> 标记中的 Javascript 代码，因此我将能够填充 Plotly.js 可视化）。

应该是这样的：

在 Node.js 脚本上：

从 Azure 获取数据（完成）
将数据传递给 HTML 或 HTML 可以捕获的地方

在 HTML 标记中：

<html>
<head>
</head>
<body>
    <script>
        // CATCH THE DATA RIGHT HERE

        // PROCESS THE DATA USING PLOTLY.JS

        </script>
</body>
</html>

我一直在浏览 Restify 和 ExpressJS，但说实话，我不太明白，而且我还没有找到一个示例来捕获“html 的 javascript”上的数据。

我不是要代码（我不想被误解。不过，一些例子会很棒），但我想知道在哪里可以找到类似的东西、工具、库或其他东西这将帮助我实现这一目标。

谢谢！

【问题讨论】：

你需要创建一个api，最快的方法是azure functions
@MikeEzzati 这根本不是真的。
@IlFollio 如果您想在页面中包含此数据，您可以通过首先将其序列化为 JSON 将其注入脚本标签。

标签： javascript node.js express restify

【解决方案1】：

首先，与其创建服务器并创建 API 来提供 JSON 数据，不如使用 node 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);
})

它应该可以在没有太多麻烦的情况下工作。

当您想走更长的路线时，您可以安装 express 并编写一个小型 express 服务器，该服务器带有一个为数据提供服务的路由端点。

【讨论】：

【解决方案2】：

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

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

您可能不会同时使用两者。

如果您想要一个“有点”像传统 Web 应用程序的出色起点，请研究 Express Application Generator：https://expressjs.com/en/starter/generator.html

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

【讨论】：

【解决方案3】：

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

实现一个专用端点以将数据可视化为 JSON 字符串 (GET /data/?whatever=1234)
编写您的 Plotly.js 脚本以通过 AJAX 请求所需的数据，并在 DOM 准备好后立即显示。

最重要的想法是，您正在为数据创建一个资源，并为获取该资源创建一个 URL。绘制数据图只是一个应用程序；将来您可能还想用它做很多其他事情。

【讨论】：