CODEWITHSUNDEEP
javascriptjqueryajaxjson
tjustbecause
tjustbecause

Reputation: 61

Import JSON via ajax and looping through

obviously I am newbie. I am trying to load a json file via ajax, then loop through that array to populate a graph using a cytoscape.js package (another question for another day). Before I begin my loop to create new nodes and edges, I am trying to test my loop to verify the output. However, nothing it's not working. 

<html>
<head>
  <title>Springy.js image node demo</title>
</head>
<body>
<script src="jquery-1.11.3.js"></script>
<script src="springy.js"></script>
<script src="springyui.js"></script>
<script src="bluebird.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>    


      // get exported json from cytoscape desktop via ajax
  var graphP = $.ajax({
    url: 'https://rawgit.com/theresajbecker/CompBio/master/TokyosmallTest/Tokyosmall2.json', // tokyo-railways.json
    type: 'GET',
    dataType: 'json'
  });  
    console.log(graphP);
    var node = graphP.nodes;
    //var employee2 = elements.edges;

    for ( var i in node) {
        var id = nodes[i].id;
        var station_name = nodes[i].station_name;
        console.log(id);
        console.log(station_name);
    }

</script>

</body></html>

This should produce the output of node id and station name but it's not. The console.(log) produces: Object {readyState: 1} What am I doing wrong here? Thanks

Upvotes: 2

Views: 350

Answers (4)

Thomas
Thomas

Reputation: 1

Try using this:

$.getJSON( "https://rawgit.com/theresajbecker/CompBio/master/TokyosmallTest/Tokyosmall2.json", function( data ) {  
  for (var i = 0; i < data.elements.nodes.length; i++) {  
    var node = data.elements.nodes[i];
    console.log(node.data.id);
  }
});

For further reading: http://api.jquery.com/jquery.getjson/

Upvotes: 0

Travis J
Travis J

Reputation: 82287

jsFiddle Demo

The main problem is that $.ajax isn't going to return the json. It is going to inject it into a success callback function. So what you need to do is move your expected code below which uses the "value" from $.ajax to be inside of the success function.

$.ajax({
 url: 'https://rawgit.com/theresajbecker/CompBio/master/TokyosmallTest/Tokyosmall2.json', // tokyo-railways.json
 type: 'GET',
 dataType: 'json',
 success: function(graphP){
  console.log(graphP);
  //the structure of the json is slightly different than your mappings
  //for example
  var firstNodeId = graphP.elements.nodes[0].data.id;//is the first id
 }
});

Upvotes: 0

Tezirg
Tezirg

Reputation: 1639

Ajax queries are asynchronous, you must wait for it to complete :
var query = $.ajax({url: url', // tokyo-railways.json type: 'GET', dataType: 'json' }) .done(function( graphP ) { //Your code here console.log(graphP); });

Upvotes: 0

dreyescat
dreyescat

Reputation: 13818

It is because $.ajax is async.

Try:

  // get exported json from cytoscape desktop via ajax
  $.ajax({
    url: 'https://rawgit.com/theresajbecker/CompBio/master/TokyosmallTest/Tokyosmall2.json', // tokyo-railways.json
    type: 'GET',
    dataType: 'json'
  }).done(function (graphP) {  
    console.log(graphP);
    var node = graphP.nodes;
    //var employee2 = elements.edges;

    for ( var i in node) {
        var id = nodes[i].id;
        var station_name = nodes[i].station_name;
        console.log(id);
        console.log(station_name);
    }
  });

See demo

Upvotes: 2

Related Questions