Question

显然我是新手。我试图通过ajax加载一个json文件，然后循环遍历该数组以使用cytoscape.js包填充图表（另一天的另一个问题）。在我开始创建新节点和边的循环之前，我正在尝试测试我的循环以验证输出。但是，没有什么不起作用。

<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>

这应该产生节点id和站名的输出，但它不是。控制台。（日志）生成：对象{readyState：1} 我在这做错了什么？感谢

Answer 1

这是因为$.ajax 是异步。

尝试：

  // 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);
    }
  });

请参阅demo

Answer 2

<强> jsFiddle Demo

主要问题是$.ajax不会返回json。它将把它注入成功的回调函数。因此，您需要做的是将您期望的代码移到下面，该代码使用$.ajax中的“值”在成功函数内部。

$.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
 }
});

Answer 3

Ajax查询是异步的，您必须等待它完成：
var query = $.ajax({url: url', // tokyo-railways.json type: 'GET', dataType: 'json' }) .done(function( graphP ) { //Your code here console.log(graphP); });

Answer 4

尝试使用：

$.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);
  }
});

进一步阅读： http://api.jquery.com/jquery.getjson/

通过ajax导入JSON并循环

4 个答案: