Javascript 使用脚本标记将JS数据导入HTML文件_Javascript_Html_Arrays

Javascript 使用脚本标记将JS数据导入HTML文件

javascript html arrays

Javascript 使用脚本标记将JS数据导入HTML文件,javascript,html,arrays,Javascript,Html,Arrays,在我的节点项目中，我试图将一些数据从JS文件拉入HTML文件。我遇到了几个例子：如何做到这一点。我的问题是：下面的方法是否应该有效在我的index.html文件中，我有以下内容： <!doctype html> <html> <head> <script type="text/javascript" src="../../../lib/user-interface/jobs-list.js"></script>

在我的节点项目中，我试图将一些数据从JS文件拉入HTML文件。我遇到了几个例子：如何做到这一点。我的问题是：下面的方法是否应该有效

在我的index.html文件中，我有以下内容：

<!doctype html>
<html>
    <head>
        <script type="text/javascript" src="../../../lib/user-interface/jobs-list.js"></script>
             <script type="text/javascript" >
                function load() {
                     const jobsData = JSON.parse(data);
                     console.log(jobsData);
                     }
                 }
        </script>
    </head>
    <body onload="load()">
     // ... other code
    </body>
</html>

换句话说，当我运行HTML文件时，这是否足以将数组日志的内容发送到控制台？如果没有，我错过了什么？我只是想对当外部JS文件和HTML文件属于同一个项目时如何将数据从外部JS文件拉入HTML文件有一个基本的了解

当我按原样尝试时，我在浏览器的控制台中出现以下错误：

（索引）：20未捕获引用错误：数据未定义
，其中包含JSON.parse（data）
。如果未全局定义数据
，则此操作将不起作用。另外，如果您没有使用某种透明工具，module
将不会在浏览器中被定义。那么，什么是最简单的实现呢？例如，如果我直接导入一个json文件['job 1'，'job 2'，'job 3']
？如何提取数据并将其分配给HTML文件中的变量？如果不在浏览器中使用模块
，则只要数据
是全局的，代码就可以了。但是，我会通过将数据的硬编码值作为参数传递，使加载
函数参考透明函数load（json）{const jobsData=json.parse（json）；}
然后，在调用load时传递数据，如下所示：。这是一个小小的改变，但是现在你的加载功能更加便携。谢谢。在这种情况下，如何确保“数据”是全局的呢？嗯，好吧，但是，它似乎不适用于我当前的实现。我想知道一种可靠的证明方法，用最简单的实现将外部数据从另一个文件拉入HTML文件并在那里使用。你知道一些有用的例子吗？
const data = [
    "Job 1",
    "Job 2",
    "Job 3"
];

module.exports = data;