Question

我正在尝试使用外部JSON文件在cytoscape.js中创建图形。目标是在图形中获得基于事件的变化（即输入数据的变化）。为了达到这个目的，我想到了使用外部JSON文件。

使用以下调用来获取JSON内容：

var treeData;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
      treeData = JSON.parse(this.responseText);

  }
};
xhttp.open("GET", "http://localhost/myfile.json", true);
xhttp.send();

并将treeData提供给元素：

elements: treeData,

（我已尝试过不解析JSON）。

以下是JSON文件的结构：

{
"nodes": [
  { "data": { "id": "j", "name": "Jerrymmmmmmm", "faveColor": "#6FB1FC", "size": 150} },
  { "data": { "id": "e", "name": "Elainemmmmmmm", "faveColor": "#EDA1ED", "size": 100 } },
  { "data": { "id": "k", "name": "Kramemmmmrmmm",  "faveColor": "#86B342", "size":90 } },
  { "data": { "id": "g", "name": "Georgemmmmmmm",  "faveColor": "#F5A45D", "size":75} },
   ],
"edges": [
  { "data": { "source": "j", "target": "e", "faveColor": "red",  } },
  { "data": { "source": "j", "target": "k", "faveColor": "red",} },
  { "data": { "source": "j", "target": "g", "faveColor": "black",} },
]
  }

获得以下错误： JSON位于1449位JSON.parse（）的XMLHttpRequest.xhttp.onreadystatechange中的意外标记]。

非常感谢帮助......谢谢

Answer 1

你在哥们那里有一些额外的逗号。在＆＃34; red＆＃34;之后＆＃34; black＆＃34;，在你的最后一个＆＃34;节点＆＃34;之后对象，以及你的最后一个＆＃34;边缘＆＃34;宾语。试试这个：

{
    "nodes": [{
        "data": {
            "id": "j",
            "name": "Jerrymmmmmmm",
            "faveColor": "#6FB1FC",
            "size": 150
        }
    }, {
        "data": {
            "id": "e",
            "name": "Elainemmmmmmm",
            "faveColor": "#EDA1ED",
            "size": 100
        }
    }, {
        "data": {
            "id": "k",
            "name": "Kramemmmmrmmm",
            "faveColor": "#86B342",
            "size": 90
        }
    }, {
        "data": {
            "id": "g",
            "name": "Georgemmmmmmm",
            "faveColor": "#F5A45D",
            "size": 75
        }
    }],
    "edges": [{
        "data": {
            "source": "j",
            "target": "e",
            "faveColor": "red"
        }
    }, {
        "data": {
            "source": "j",
            "target": "k",
            "faveColor": "red"
        }
    }, {
        "data": {
            "source": "j",
            "target": "g",
            "faveColor": "black"
        }
    }]
}

此外，一个非常有用的工具可以帮助您调试JSON错误是jsonlint：http://jsonlint.com/

在外部json文件调用cytoscape.js期间出现意外的令牌]错误

1 个答案: