0

I am working on orders.js but I need arrays from products/products.js and from users/users.js, How could I get access to those files to work on the actual file? I am a beginner with JavaScript and I don't know well how I have to link those files.

I am not using any framework or library, Vanilla Java Scrip only

Thanks for your help

enter image description here

J P
  • 243
  • 1
  • 9
  • `$.getJSON('filepath')` search for it – Jaydip Jadhav Mar 09 '20 at 04:04
  • Does this answer your question? [Using Node.JS, how do I read a JSON file into (server) memory?](https://stackoverflow.com/questions/10011011/using-node-js-how-do-i-read-a-json-file-into-server-memory) – Gaurav joshi Mar 09 '20 at 04:13
  • There are different ways.. you can create a service.js file and use that as a bridge between both files. If you are using a framework look out for the available pattern in that. Or set the details required to window object and they will be accessible in all js files – Manish Mar 09 '20 at 04:13
  • 1
    Just use ``s in your ``. Make sure you use `addEventListener('load', ()=>{ /* other script is accessible */ });` – StackSlave Mar 09 '20 at 04:16
  • Hello I want to use an array called users and another one called products in orders/ordes.js – J P Mar 09 '20 at 04:18
  • Does this answer your question: [Can I access variables from another file](https://stackoverflow.com/a/3244411/12731030) – Dum Mar 09 '20 at 04:25

1 Answers1

1

This is a bit more of a complicated question than it might at first seem. JavaScript is a language that is used in various environments, and it has a number of module systems.

From the picture you posted it seems like you are trying to implement a standard webpage with JS files for each page. In this case you're not able to directly "import" variables from other files, instead you must load them all into the global context that all files are sharing in the browser.

Essentially you should have some data.js script that is loaded in the index.html. Then you can expose some data such as:

var myProducts = ['a', 'b'];

Any script loaded after data.js will then be able to access myProducts.

To further elaborate on JS modules: it is typical to use a packager such as webpack which will pre-compile your pages and JS files and allow you to do what your describing ie. importing modules from other files in your code. However, Webpack can be very complicated to setup, especially for a beginner, I would suggest trying out parcel which should get you up and running really quickly.

Once you have a packager setup then you would be able to import modules from other files like so:

# data.js
module.exports = {
  myProducts: ['a', 'b'],
};

# page.js
const { myProducts } = require('path/to/data.js');

Note on ES modules: ParcelJS actually comes with the latest standard (ES modules) pre-configured, so in this setup you would be able to use the following syntax:

# data.js
export const myProducts = ['a', 'b', 'c'];

# page.js
import { myProducts } from 'path/to/data.js';
Tim O'Connell
  • 132
  • 4