无法从另一个JavaScript文件引用JavaScript数组

Question

I am trying to create a chart using highcharts in which i am not able to fetch data which i store in another js file.

My main.js file has all the code for creating chart. It has the section of series.

series: [{
            name: 'Desktops',
            data: '/data/desktop.js',
            tooltip: {
                valueDecimals: 2
            }
        }]

Here i want to refer data from another js file. The name of file is desktop.js and it has just the below array

var desktopData = [[1475272800000, 117759], [1475359200000, 106147], [1475445600000, 147747], [1475532000000, 302031], [1475618400000, 520539], [1475704800000, 245353], [1475791200000, 180376], [1475877600000, 78819], [1475964000000, 90466], [1476050400000, 257822], [1476136800000, 284465], [1476223200000, 242898], [1476309600000, 297186], [1476396000000, 268069], [1476482400000, 183149], [1476568800000, 410442], [1476655200000, 1117798], [1476741600000, 1274668], [1476828000000, 1331799], [1476914400000, 1230213], [1477000800000, 888251], [1477087200000, 572050], [1477173600000, 931144], [1477260000000, 1556641], [1477346400000, 1526736], [1477432800000, 1310133], [1477519200000, 1207422], [1477605600000, 785556], [1477692000000, 487264], [1477778400000, 787714], [1477868400000, 942663]];

How can i refer array defined in another file?

Answer 1

Do you use any type of the framework? To load JS file in another file, you need to require it somehow, either by using AMD, ES imports or any other way (be it synchronous or asynchronous).

If you are just adding the files to the HTML (using script tags), then the only thing you have to do is to make sure that the files are loaded ( DOMContentLoaded event) and then, you have to attach the data to a global scope.

Global scope in the browsers is called a window and every time when you use variable that was not declared in your scope by var it means that the JS is searching for it in the global scope. In order to assign something to a global scope you can just omit var or explicitely assign it like this:

window.desktopData = [];

// And then in another file, assuming that the data is ready

var myData = window.desktopData

Please also remember that including files in <script> tags usually means that they will block your browser and the order of the files matters (at least when you want to rely on the fact of one file already loaded before another file). I'd suggest using some kind of import system then:

http://requirejs.org/docs/whyamd.html