Loading and using JSON for Cytoscape.js

Question

Context

I want to use cytoscape.js for visualizing graphs. While I am capable with a myriad of languages (C++, Mathematica,

Answer 1

Let's presume you have a json file in the same folder as your 'index.html', and your server is running. First request the json file via a http request (using plain javascript or jquery ).

If your json file has the same format as the elements properties, you can just parse it to a javascript object and set it. E.g.

var myObject = {};
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
      myObject = JSON.parse(this.responseText);
      initCytoscape();
  }
};
xhttp.open("GET", "myJson.json", true);
xhttp.send();

function initCytoscape() {
  cytoscape({
    container: document.getElementById('cy'),
    elements: myObject
  });
}

if the json property is different than cytoscape's format, then you have to programatically convert it.