Loading and using JSON for Cytoscape.js
<h1>Context</h1>
<p>I want to use <code>cytoscape.js</code> for visualizing graphs. While I am capable with a myriad of languages (<code>C++</code>, <code>Mathematica</code>, <code>R</code>, etc), I am new to <code>Javascript</code>, <code>JSON</code>, <code>HTML</code>, and <code>CSS</code>. Thus it would be favorable to learn these languages through this use case (implementing graphs with <code>cytoscape.js</code>). Please keep this in mind in your answer.</p>
<p>I have previously asked how to [remotely load <a href="https://stackoverflow.com/q/40298582/5623899"><code>cytoscape.js</code></a> and <a href="https://stackoverflow.com/a/40299892/5623899">how to get graphs display (requires a <code>div</code>)</a>. Since then I have created a script that turns a graph as represented in one of the other languages I use, into the <code>JSON</code> format indicated <a href="http://js.cytoscape.org/#notation/elements-json" rel="noreferrer">here</a>. While I can just copy-paste all of this directly into my program, for large networks that is clearly a poor way to implement it. An example of my script's output is at the bottom of this.</p>
<h1>Question</h1>
<p>Given a <code>JSON</code> object/file(?) how can I do the following:</p>
<ul>
<li>load it into <code>cytoscape.js</code> without copy-pasting the code.</li>
<li>referencing it once loaded. (e.g. basic explanation of how JSON syntax for use in <code>cytoscape.js</code>)</li>
</ul>
<h1>Script Output</h1>
<pre><code>cytoscape({

container: document.getElementById('cy'),

elements: [ 
{// node Node 1
    group: 'nodes',

    data: {
        id: 'Node 1'
    },

    selected: false,

    selectable: true,

    locked: false,

    grabbable: true,

    selectable: true,

},
{// node Node 2
    group: 'nodes',

    data: {
        id: 'Node 2'
    },

    selected: false,

    selectable: true,

    locked: false,

    grabbable: true,

    selectable: true,

},
{// node Node 3
    group: 'nodes',

    data: {
        id: 'Node 3'
    },

    selected: false,

    selectable: true,

    locked: false,

    grabbable: true,

    selectable: true,

},
{// edge 1_2
    group: 'edges',

    data: {
        id: '1_2',
        source: '1',
        target: '2'
    }
},
{// edge 2_3
    group: 'edges',

    data: {
        id: '2_3',
        source: '2',
        target: '3'
    }
},
{// edge 3_1
    group: 'edges',

    data: {
        id: '3_1',
        source: '3',
        target: '1'
    }
}
],
style: [
    {
        selector: 'node',
        style: {
            'content': 'data(id)'
        }
    }
]

});
</code></pre>