如何将数组从 .js 文件导入 HTML 文件？答案

【问题标题】：How do I import an array from a .js file into an HTML file?如何将数组从 .js 文件导入 HTML 文件？
【发布时间】：2021-12-06 23:37:35
【问题描述】：

我是 JS 和 HTML 的新手，对于一个作业，我收到了包含数组的 stocks.js：

'use strict';

const stocks = [
    { company: 'Splunk', symbol: 'SPLK', price: 137.55 },
    { company: 'Microsoft', symbol: 'MSFT', price: 232.04 },
    { company: 'Oracle', symbol: 'ORCL', price: 67.08 },
    { company: 'Snowflake', symbol: 'SNOW', price: 235.8 },
    { company: 'Terradata', symbol: 'TDC', price: 44.98 }
];

module.exports.stocks = stocks;

我应该在我制作的另一个静态 HTML 页面stocklist.html 中使用这个数组来制作一个包含来自stocks.html 的所有数据的表格。到目前为止，我有：

<html lang = "en">
    <head>
        <meta charset = "utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>

    <body>
        <table>
            <caption><h1>Stock List</h1></caption>
            <thead>
                <tr>
                    <th>Company |</th>
                    <th>Symbol |</th>
                    <th>Cost</th>
                </tr>
            </thead>
            <tbody id = "stockTable">

            </tbody>
        </table>

        <script>
            const { stocks } = require('./stocks.js');
            buildTable(stocks);
    
            function buildTable(data) {
                var table = document.getElementById("stockTable")
    
                for (var i = 0; i < data.length; i++) {
                    var row = 
                        `<tr>
                            <td>${data[i].company}</td>
                            <td>${data[i].symbol}</td>
                            <td>${data[i].price}</td>
                        </tr>`
                    table.innerHTML += row;
                }
            }
        </script>
    </body>
</html>

当我将数组stocks 从stocks.js 复制并粘贴到<script> 元素中时，表格创建得很好。但是，鉴于作业的要求，我不能这样做，我也不能编辑stocks.js。如何将stocks 数组从stocks.js 导入stocklist.html，以便我可以使用buildTable 访问？

编辑：我的不可编辑的 package.json 文件被分配给我。

{
  "name": "assignment3",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "nodemon": "^2.0.12"
  }
}

【问题讨论】：

只需编辑在您的 buildTable() 函数上方添加这一行。我说的对吗？
我尝试将<script type="text/javascript" src="stocks.js"></script> 放在buildTable(stocks) 和function buildTable(data) 之间，不幸的是，无论我把它放在哪里，它都会将</script> 从你的行中关联起来给了我原始代码中的<script>。

标签： javascript html arrays html-table

【解决方案1】：

当您将数组导出为 CJS 模块时，我建议您检查 CommonJS (CJS) modules documentation

此外，在您的情况下，您可以只需要您的 stock.js 正在导出的模块。像这样：

const { stocks } = require('path/to/socks.js')

【讨论】：

所以我尝试将const stocks = require('stocks.js') 行放在我的HTML 正文中buildArray(stocks) 的正上方，我认为stocks.js 和stocklist.html 都在根目录中，但我没有看到任何变化。我是否将其插入正确的位置？
您需要将此代码添加到您的stocklist.html<script> 标签中。
<script> const stocks = require('stocks.js'); buildTable(stocks); //rest of the code </script> 作为参考，我在这里插入了它，但没有看到任何变化。为草率的格式道歉。
确实有错误。这个require('stocks.js') 将返回一个对象，这个对象内部就是您的股票数组所在的位置。
试着用实际的例子来做。我已经编辑了原始答案

【解决方案2】：

而不是将代码直接写入脚本标签。您可以使用脚本标签来导入您的 js 文件。像这样：

<script src="./stocks.js" type="text/javascript" ></script>

编辑：好吧，这不是我所理解的。将 javascript 导入另一个 javascript。您可以在文件顶部添加let stocksArray = require("./stocks.js");，然后您就可以访问您的股票数组。

【讨论】：

如果你的意思是把 stocklist.js 中的 <script> 元素中的所有内容添加到 stocks.js 中，我不能。我忘了在原帖中提到stocks.js不允许编辑；解决了这个问题。
@FujiHana 我已经编辑了答案。起初我误解了你，但现在它应该符合你的要求
当您说“文件顶部”时，您是指在标题标签中吗？我已经尝试将let stocks = require("./stocks.js") 行放在我的标题中，以及在我的body 元素中<script> 中的buildTable(stocks) 行上方，但都没有奏效。