How do I import an array from a .js file into an HTML file?-CodePudding

I'm new to JS and HTML, and for an assignment, I was given stocks.js containing an array:

'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;

I'm supposed to use this array in another static HTML page I make, stocklist.html, to make a table with all the data from stocks.html. So far I have:

<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>

When I just copy and paste the array stocks from stocks.js into the <script> element, the table is created just fine. Given the assignment's requirements, however, I can't do that, and I also can't edit stocks.js. How do I import the stocks array from stocks.js into stocklist.html so that I can access with buildTable?

Edit: My uneditable package.json file I was given for the assignment.

{
  "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"
  }
}

CodePudding user response：

As you're exporting the array as a CJS module, I suggest that you check a CommonJS (CJS) modules documentation

Furthermore, in your case, you can just require the module that your stocks.js are exporting. Like this:

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

CodePudding user response：

Instead of writing your code directly into the script tag. You could use the script tag to import your js file. Like so :

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

EDIT: Okay, that was not what I understood. To import javascript into another javascript. You can add let stocksArray = require("./stocks.js"); at the top of your file, and then you have access to your stocks array.