node - how to read correctly json from a local file?
Question
I am using node.js to serve a page (index.html) where I visualize a network graph, using vis.js . In order to draw a network graph with this library, one needs to provide a nodes and edges json arrays ( see example ).
// create an array with nodes
var _nodes_ = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
];
// create an array with edges
var _edges_ = [
{from: 1, to: 2},
{from: 1, to: 3},
{from: 2, to: 4},
{from: 2, to: 5}
];
The first version of my index.html file looks like:
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/vis.js"></script>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript" >
// create an array with nodes
var _nodes_ = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
];
// create an array with edges
var _edges_ = [
{from: 1, to: 2},
{from: 1, to: 3},
{from: 2, to: 4},
{from: 2, to: 5}
];
console.log(_nodes_);
console.log(_edges_);
// create a network
var container = document.getElementById('mynetwork');
var data= {
nodes: _nodes_,
edges: _edges_,
};
var options = {
autoResize: true,
clickToUse: false,
width: '800px',
height: '800px'
};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>
And it is working just fine. However, when I try to read from a local file the nodes and edges arrays, the network graph doesn't show up:
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/vis.js"></script>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript" >
// create an array with nodes
var _nodes_;
var _edges_;
$.getJSON('json/nodes.json', function(nodes) {
_nodes_= nodes;
});
$.getJSON('json/edges.json', function(edges) {
_edges_ = edges;
});
console.log(_nodes_);
console.log(_edges_);
// create a network
var container = document.getElementById('mynetwork');
var data= {
nodes: _nodes_,
edges: _edges_,
};
var options = {
autoResize: true,
clickToUse: false,
width: '800px',
height: '800px'
};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>
I am using:
nodes.json :
[ { "id": 1, "label": "Node 1" }, { "id": 2, "label": "Node 2" }, { "id": 3, "label": "Node 3" }, { "id": 4, "label": "Node 4" } ]
edges.json :
[ { "from": 1, "to": 2 }, { "from": 1, "to": 3 }, { "from": 1, "to": 4 } ]
Is there a difference between creating a json inside your javascript and reading from a file? Can someone help me spot the error here please?
Thanks!
3 answers
solution1
0 2016-07-19 19:28:59
Based on the comment of @anvk, I set the global ajax configs to synchronous by doing $.ajaxSetup({ async: false }); before my $.getJSON and It worked! I can toggle them back to asynchronous by $.ajaxSetup({ async: true });
Thanks.
solution2
0 ACCPTED 2016-07-27 09:56:56
Ajax is asynchronous by default so you have to draw the graph after your data is loaded!
Or you could use the add function of DataSet to add your nodes and edges after they are loaded.
Here is an working example:
var _nodes = new vis.DataSet(); var _edges = new vis.DataSet(); var container = document.getElementById('mynetwork'); var data = { nodes: _nodes, edges: _edges, }; var options = { autoResize: true, clickToUse: false }; var network = new vis.Network(container, data, options); $.getJSON('//gist.githubusercontent.com/mojoaxel/b9ed2fe1ff7154b339d6ffde555f0606/raw/6d9b1c4e0b642ab05837ee60a6c6ca9f64b9995f/edges.json', function(edges) { _edges.add(edges); }); $.getJSON('https://gist.githubusercontent.com/mojoaxel/b9ed2fe1ff7154b339d6ffde555f0606/raw/6d9b1c4e0b642ab05837ee60a6c6ca9f64b9995f/nodes.json', function(nodes) { _nodes.add(nodes); });
#mynetwork { width: 100%; height: 100%; border: 1px solid gray; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script> </head> <body> <div id="mynetwork"></div> </body> </html>
solution3
0 2016-10-18 02:48:43
Try this format {"id": "1", "label": "Node 1"} for nodes.json.
Use 'source'&'target' instead of 'from' & 'to' for edges.json.
Here is the example of vis.js . Please check the JSON file format in this example. http://visjs.org/examples/network/data/importingFromGephi.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.