cytoscape.js 的外部 json 文件调用期间发生意外标记 ] 错误
Unexpected token ] error during external json file call for cytoscape.js
我正在尝试使用外部 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 中 JSON.parse 位置 1449 中的意外标记 ] () XMLHttpRequest.xhttp.onreadystatechange.
非常感谢协助...谢谢
伙计,你那里多了一些逗号。在 "red" 之后、"black" 之后、最后一个 "nodes" 对象之后以及最后一个 "edges" 对象之后。试试这个:
{
"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"
}
}]
}
此外,jsonlint 是一个非常有用的工具,可以帮助您调试 JSON 错误:http://jsonlint.com/
我正在尝试使用外部 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 中 JSON.parse 位置 1449 中的意外标记 ] () XMLHttpRequest.xhttp.onreadystatechange.
非常感谢协助...谢谢
伙计,你那里多了一些逗号。在 "red" 之后、"black" 之后、最后一个 "nodes" 对象之后以及最后一个 "edges" 对象之后。试试这个:
{
"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"
}
}]
}
此外,jsonlint 是一个非常有用的工具,可以帮助您调试 JSON 错误:http://jsonlint.com/