I want to import an array (imageArray[]) that is being populated by another JavaScript file (imageUploadDisplay.js) into another JavaScript file function (postInfoAndImages.js). Below is my imageUploadDisplay.js function that I tried to use.

// In my imageUploadDisplay.js

var imageList = [];

function myImageList() {

    return imageList;
}

As explained by others I use the following jQuery to import imageUploadDisplay.js into the JavaScript postInfoAndImages.js:

// In my postInfoAndImages.js
var imageList = [];

$.getScript('imageUploadDisplay.js', function () {
            // Script is now loaded and executed.
            alert("Script loaded, but not necessarily executed.");
            imageList = myImageList(); // Picture array
            console(imageList);
        });

I want to import an array (imageArray[]) that is being populated by another JavaScript file (imageUploadDisplay.js) into another JavaScript file function (postInfoAndImages.js). Below is my imageUploadDisplay.js function that I tried to use.

// In my imageUploadDisplay.js

var imageList = [];

function myImageList() {

    return imageList;
}

As explained by others I use the following jQuery to import imageUploadDisplay.js into the JavaScript postInfoAndImages.js:

// In my postInfoAndImages.js
var imageList = [];

$.getScript('imageUploadDisplay.js', function () {
            // Script is now loaded and executed.
            alert("Script loaded, but not necessarily executed.");
            imageList = myImageList(); // Picture array
            console(imageList);
        });

• javascript
• jquery
• html

• You define the same variable in two files? – epascarello Commented Aug 6, 2019 at 18:57
• Yes was attempting to at least copy the values from 1 array to the other – Thabiso Prosper Ramokopu Commented Aug 6, 2019 at 19:00
• It's not clear what problem you're having. – Joss Classey Commented Aug 6, 2019 at 19:00
• I want to access the array created and populated by imageUploadDisplay.js into a function created in postInfoAndImages.js – Thabiso Prosper Ramokopu Commented Aug 6, 2019 at 19:04
• You are not importing anything into postInfoAndImages.js, contrary to what you are thinking. You are simply executing a piece of code which is injecting another script to the document itself, and not to postInfoAndImages.js, thus it should already be globally accessed, depending on what's inside the injected script. – vsync Commented Aug 6, 2019 at 19:09

3 Answers 3

For modern browsers like Firefox, Chrome, Safari and Opera, just use ES6 modules.

In your imageUploadDisplay.js create a named export:

// imageUploadDisplay.js
var imageList = [];

export function myImageList() {
  return imageList;
}

Then just import the function:

// then in postInfoAndImages.js
import { myImageList } from './path/to/imageList.js';

var imageList = myImageList();

In your HTML, you no longer need to include imageUploadDisplay.js (this is done by the import at runtime).

Instead, include the importing script with type="module":

<script type="module" src="./path/to/postInfoAndImages.js"></script>

You don't even need to include the second file in your first to use the function. If the first file is called in your code before the second, you can just refer to the function.

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

In postInfoAndImages.js, simply call the function in question:

var imageList[];
imageList = myImageList();

You need to work with exports and imports.

// File imageUploadDisplay.js

let myImageList = () => {
    return imageList;
}

export default imageList

And then import it into the other file

// postInfoAndImages.js

import imageList from "./imageUploadDisplay"

// -> Do something with imageList