从数据库中提取 json 时出错
Error while fetching json from database
我可以使用以下方法将数据发送到数据库：
$("#set").click(function ()
{
var cells = graph.getCell();
var StateObject = graph.toJSON();
var SavedState = JSON.stringify(StateObject);
console.log("Here is the state object " + StateObject);
console.log("Here is the saved state: " + SavedState);
$.ajax({
url: 'JsonProcessor.do',
type: 'post',
dataType: 'json',
data: {
test: StateObject
}
});
});
但是在抓取时我在 chrome 控制台中遇到这样的错误：
未捕获错误：图形 JSON 必须包含元胞数组
获取数据的代码：
$("#get").click(function ()
{
$.ajax({
url: 'JsonProcessor.do',
type: 'get',
dataType: 'json',
success: function (data) {
var result = data;
console.log("Result from Database: " + result);
graph.fromJSON(result);
}
});
});
我可以看到在 chrome 控制台中提取的对象是这样的：[object Object] 当我展开它时
`0: Object
JSON_Diagram: "test=%5B%7B%22empID%22%3A%22%22%7D%2C%7B%22cells%22%3A%5B%7B%22type%22%3A%22basic.Rect%22%2C%22position%22%3A%7B%22x%22%3A-2%2C%22y%22%3A33%7D%2C%22size%22%3A%7B%22width%22%3A71%2C%22height%22%3A625%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%22ca4cc8a8-7e95-43cb-a8d3-8cf24c82d43f%22%2C%22z%22%3A1%2C%22embeds%22%3A%5B%22b6aee295-16fa-41e7-b25e-d20610cbd631%22%2C%2288de9a15-cbc8-4c02-a358-30491d50cb37%22%5D%2C%22attrs%22%3A%7B%22rect%22%3A%7B%22fill%22%3A%22%23EEEEEE%22%2C%22stroke%22%3A%22%23008B8B%22%2C%22stroke-width%22%3A2%7D%2C%22.%22%3A%7B%22magnet%22%3Afalse%7D%7D%7D%2C%7B%22type%22%3A%22basic.Circle%22%2C%22size%22%3A%7B%22width%22%3A53%2C%22height%22%3A53%7D%2C%22position%22%3A%7B%22x%22%3A8%2C%22y%22%3A130%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%22b145b765-a60b-4742-82a6-712da89e4dd0%22%2C%22z%22%3A3%2C%22attrs%22%3A%7B%22.%22%3A%7B%22magnet%22%3Afalse%7D%2C%22circle1%22%3A%7B%22fill%22%3A%22white%22%2C%22stroke-width%22%3A2%2C%22stroke%22%3A%22green%22%7D%7D%7D%2C%7B%22type%22%3A%22basic.Circle%22%2C%22size%22%3A%7B%22width%22%3A53%2C%22height%22%3A53%7D%2C%22position%22%3A%7B%22x%22%3A8%2C%22y%22%3A225%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%221b99b595-57cd-4127-9ec0-d5842beb183a%22%2C%22z%22%3A4%2C%22attrs%22%3A%7B%22.%22%3A%7B%22magnet%22%3Afalse%7D%2C%22circle2%22%3A%7B%22fill%22%3A%22white%22%2C%22stroke%22%3A%22green%22%7D%7D%7D%2C%7B%22type%22%3A%22basic.Circle%22%2C%22size%22%3A%7B%22width%22%3A53%2C%22height%22%3A53%7D%2C%22position%22%3A%7B%22x%22%3A8%2C%22y%22%3A320%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%227e953c11-d361-44d0-bf29-3d3fa146519c%22%2C%22z%22%3A5%2C%22attrs%22%3A%7B%22.%22%3A%7B%22magnet%22%3Afalse%7D%2C%22circle3%22%3A%7B%22fill%22%3A%22white%22%2C%22stroke%22%3A%22green%22%7D%7D%7D%2C%7B%22type%22%3A%22basic.Rect%22%2C%22position%22%3A%7B%22x%22%3A35%2C%22y%22%3A505%7D%2C%22size%22%3A%7B%22width%22%3A55%2C%22height%22%3A55%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%22186a6dd7-2b5e-48d6-8e35-ee821ebbb4dc%22%2C%22z%22%3A7%2C%22attrs%22%3A%7B%22rect%22%3A%7B%22fill%22%3A%22%23FFED6B%22%2C%22stroke%22%3A%22%23DBCB62%22%2C%22width%22%3A55%2C%22height%22%3A55%2C%22stroke-width%22%3A1%2C%22transform%22%3A%22rotate(45)%22%7D%2C%22.%22%3A%7B%22magnet%22%3Afalse%7D%7D%7D%2C%7B%22type%22%3A%22basic.Rect%22%2C%22position%22%3A%7B%22x%22%3A10%2C%22y%22%3A50%7D%2C%22size%22%3A%7B%22width%22%3A51%2C%22height%22%3A41%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%22b6aee295-16fa-41e7-b25e-d20610cbd631%22%2C%22z%22%3A9%2C%22parent%22%3A%22ca4cc8a8-7e95-43cb-a8d3-8cf24c82d43f%22%2C%22attrs%22%3A%7B%22rect%22%3A%7B%22fill%22%3A%22%23D6F2FC%22%2C%22stroke%22%3A%22%237E7E7E%22%7D%2C%22.%22%3A%7B%22magnet%22%3Afalse%7D%7D%7D%2C%7B%22type%22%3A%22basic.Rect%22%2C%22position%22%3A%7B%22x%22%3A10%2C%22y%22%3A420%7D%2C%22size%22%3A%7B%22width%22%3A51%2C%22height%22%3A41%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%2288de9a15-cbc8-4c02-a358-30491d50cb37%22%2C%22z%22%3A12%2C%22parent%22%3A%22ca4cc8a8-7e95-43cb-a8d3-8cf24c82d43f%22%2C%22attrs%22%3A%7B%22.%22%3A%7B%22magnet%22%3Afalse%7D%2C%22rectGroup0%22%3A%7B%22fill%22%3A%22white%22%2C%22stroke%22%3A%22%237E7E7E%22%7D%7D%7D%2C%7B%22type%22%3A%22devs.Model%22%2C%22size%22%3A%7B%22width%22%3A751%2C%22height%22%3A170%7D%2C%22inPorts%22%3A%5B%5D%2C%22outPorts%22%3A%5B%5D%2C%22position%22%3A%7B%22x%22%3A160%2C%22y%22%3A123%7D%2C%22angle%22%3A0%2C%22id%22%3A%2237a88170-4da8-464d-99f9-32b72097c495%22%2C%22z%22%3A14%2C%22embeds%22%3A%5B%22e70977f4-52b0-4fdb-a852-8b3b63a5273e%22%5D%2C%22attrs%22%3A%7B%22.label%22%3A%7B%22text%22%3A%22CONTAINER%22%2C%22ref-y%22%3A0.1%2C%22y-alignment%22%3A%22middle%22%7D%2C%22rect%22%3A%7B%22fill%22%3A%22%22%2C%22opacity%22%3A%220.60%22%7D%7D%7D%2C%7B%22type%22%3A%22devs.Model%22%2C%22size%22%3A%7B%22width%22%3A51%2C%22height%22%3A41%7D%2C%22inPorts%22%3A%5B%22%22%5D%2C%22outPorts%22%3A%5B%22%22%5D%2C%22position%22%3A%7B%22x%22%3A234%2C%22y%22%3A187%7D%2C%22angle%22%3A0%2C%22id%22%3A%22e70977f4-52b0-4fdb-a852-8b3b63a5273e%22%2C%22z%22%3A15%2C%22parent%22%3A%2237a88170-4da8-464d-99f9-32b72097c495%22%2C%22attrs%22%3A%7B%22.%22%3A%7B%22magnet%22%3Atrue%7D%2C%22.port-body%22%3A%7B%22r%22%3A3%7D%2C%22.label%22%3A%7B%22text%22%3A%22%22%2C%22ref-x%22%3A0.4%2C%22ref-y%22%3A0.2%7D%2C%22rect%22%3A%7B%22fill%22%3A%22%23D6F2FC%22%2C%22stroke%22%3A%22%237E7E7E%22%7D%2C%22.inPorts+circle%22%3A%7B%22type%22%3A%22input%22%7D%2C%22.outPorts+circle%22%3A%7B%22type%22%3A%22output%22%7D%2C%22.inPorts%3E.port0%3E.port-label%22%3A%7B%22text%22%3A%22%22%7D%2C%22.inPorts%3E.port0%3E.port-body%22%3A%7B%22port%22%3A%7B%22id%22%3A%22in29%22%2C%22type%22%3A%22in%22%7D%7D%2C%22.inPorts%3E.port0%22%3A%7B%22ref%22%3A%22.body%22%2C%22ref-y%22%3A0.5%7D%2C%22.outPorts%3E.port0%3E.port-label%22%3A%7B%22text%22%3A%22%22%7D%2C%22.outPorts%3E.port0%3E.port-body%22%3A%7B%22port%22%3A%7B%22id%22%3A%22out30%22%2C%22type%22%3A%22out%22%7D%7D%2C%22.outPorts%3E.port0%22%3A%7B%22ref%22%3A%22.body%22%2C%22ref-y%22%3A0.5%2C%22ref-dx%22%3A0%7D%7D%7D%5D%7D%5D"
__proto__: Object
1: Object
2: Object
3: Object
length: 1
__proto__: Array[0]`
但问题是渲染数据以在 jointjs 中查看
如果有人已经解决了，请帮忙。
JointJS'fromJSON 需要格式为 { cells: [...] } 的输入。所以我怀疑如果你使用 { test: JSON.stringify } 保存你的 JSON 你将需要 JSON.parse(result.data) 然后将它传递给 graph.fromJSON.
最终解决方案
graph.fromJSON(JSON.parse(result.data))
检索时，一个名为 JSON_Diagram 的键被附加到 json 数组。 Json 通过 ajax 调用发送必须 return 精确 json 图表才能呈现图表。您需要将 JsonProcessor.do servlet 修复为 return 相同 json。希望这有帮助。
我可以使用以下方法将数据发送到数据库：
$("#set").click(function ()
{
var cells = graph.getCell();
var StateObject = graph.toJSON();
var SavedState = JSON.stringify(StateObject);
console.log("Here is the state object " + StateObject);
console.log("Here is the saved state: " + SavedState);
$.ajax({
url: 'JsonProcessor.do',
type: 'post',
dataType: 'json',
data: {
test: StateObject
}
});
});
但是在抓取时我在 chrome 控制台中遇到这样的错误：
未捕获错误：图形 JSON 必须包含元胞数组
获取数据的代码：
$("#get").click(function ()
{
$.ajax({
url: 'JsonProcessor.do',
type: 'get',
dataType: 'json',
success: function (data) {
var result = data;
console.log("Result from Database: " + result);
graph.fromJSON(result);
}
});
});
我可以看到在 chrome 控制台中提取的对象是这样的：[object Object] 当我展开它时
`0: Object
JSON_Diagram: "test=%5B%7B%22empID%22%3A%22%22%7D%2C%7B%22cells%22%3A%5B%7B%22type%22%3A%22basic.Rect%22%2C%22position%22%3A%7B%22x%22%3A-2%2C%22y%22%3A33%7D%2C%22size%22%3A%7B%22width%22%3A71%2C%22height%22%3A625%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%22ca4cc8a8-7e95-43cb-a8d3-8cf24c82d43f%22%2C%22z%22%3A1%2C%22embeds%22%3A%5B%22b6aee295-16fa-41e7-b25e-d20610cbd631%22%2C%2288de9a15-cbc8-4c02-a358-30491d50cb37%22%5D%2C%22attrs%22%3A%7B%22rect%22%3A%7B%22fill%22%3A%22%23EEEEEE%22%2C%22stroke%22%3A%22%23008B8B%22%2C%22stroke-width%22%3A2%7D%2C%22.%22%3A%7B%22magnet%22%3Afalse%7D%7D%7D%2C%7B%22type%22%3A%22basic.Circle%22%2C%22size%22%3A%7B%22width%22%3A53%2C%22height%22%3A53%7D%2C%22position%22%3A%7B%22x%22%3A8%2C%22y%22%3A130%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%22b145b765-a60b-4742-82a6-712da89e4dd0%22%2C%22z%22%3A3%2C%22attrs%22%3A%7B%22.%22%3A%7B%22magnet%22%3Afalse%7D%2C%22circle1%22%3A%7B%22fill%22%3A%22white%22%2C%22stroke-width%22%3A2%2C%22stroke%22%3A%22green%22%7D%7D%7D%2C%7B%22type%22%3A%22basic.Circle%22%2C%22size%22%3A%7B%22width%22%3A53%2C%22height%22%3A53%7D%2C%22position%22%3A%7B%22x%22%3A8%2C%22y%22%3A225%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%221b99b595-57cd-4127-9ec0-d5842beb183a%22%2C%22z%22%3A4%2C%22attrs%22%3A%7B%22.%22%3A%7B%22magnet%22%3Afalse%7D%2C%22circle2%22%3A%7B%22fill%22%3A%22white%22%2C%22stroke%22%3A%22green%22%7D%7D%7D%2C%7B%22type%22%3A%22basic.Circle%22%2C%22size%22%3A%7B%22width%22%3A53%2C%22height%22%3A53%7D%2C%22position%22%3A%7B%22x%22%3A8%2C%22y%22%3A320%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%227e953c11-d361-44d0-bf29-3d3fa146519c%22%2C%22z%22%3A5%2C%22attrs%22%3A%7B%22.%22%3A%7B%22magnet%22%3Afalse%7D%2C%22circle3%22%3A%7B%22fill%22%3A%22white%22%2C%22stroke%22%3A%22green%22%7D%7D%7D%2C%7B%22type%22%3A%22basic.Rect%22%2C%22position%22%3A%7B%22x%22%3A35%2C%22y%22%3A505%7D%2C%22size%22%3A%7B%22width%22%3A55%2C%22height%22%3A55%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%22186a6dd7-2b5e-48d6-8e35-ee821ebbb4dc%22%2C%22z%22%3A7%2C%22attrs%22%3A%7B%22rect%22%3A%7B%22fill%22%3A%22%23FFED6B%22%2C%22stroke%22%3A%22%23DBCB62%22%2C%22width%22%3A55%2C%22height%22%3A55%2C%22stroke-width%22%3A1%2C%22transform%22%3A%22rotate(45)%22%7D%2C%22.%22%3A%7B%22magnet%22%3Afalse%7D%7D%7D%2C%7B%22type%22%3A%22basic.Rect%22%2C%22position%22%3A%7B%22x%22%3A10%2C%22y%22%3A50%7D%2C%22size%22%3A%7B%22width%22%3A51%2C%22height%22%3A41%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%22b6aee295-16fa-41e7-b25e-d20610cbd631%22%2C%22z%22%3A9%2C%22parent%22%3A%22ca4cc8a8-7e95-43cb-a8d3-8cf24c82d43f%22%2C%22attrs%22%3A%7B%22rect%22%3A%7B%22fill%22%3A%22%23D6F2FC%22%2C%22stroke%22%3A%22%237E7E7E%22%7D%2C%22.%22%3A%7B%22magnet%22%3Afalse%7D%7D%7D%2C%7B%22type%22%3A%22basic.Rect%22%2C%22position%22%3A%7B%22x%22%3A10%2C%22y%22%3A420%7D%2C%22size%22%3A%7B%22width%22%3A51%2C%22height%22%3A41%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%2288de9a15-cbc8-4c02-a358-30491d50cb37%22%2C%22z%22%3A12%2C%22parent%22%3A%22ca4cc8a8-7e95-43cb-a8d3-8cf24c82d43f%22%2C%22attrs%22%3A%7B%22.%22%3A%7B%22magnet%22%3Afalse%7D%2C%22rectGroup0%22%3A%7B%22fill%22%3A%22white%22%2C%22stroke%22%3A%22%237E7E7E%22%7D%7D%7D%2C%7B%22type%22%3A%22devs.Model%22%2C%22size%22%3A%7B%22width%22%3A751%2C%22height%22%3A170%7D%2C%22inPorts%22%3A%5B%5D%2C%22outPorts%22%3A%5B%5D%2C%22position%22%3A%7B%22x%22%3A160%2C%22y%22%3A123%7D%2C%22angle%22%3A0%2C%22id%22%3A%2237a88170-4da8-464d-99f9-32b72097c495%22%2C%22z%22%3A14%2C%22embeds%22%3A%5B%22e70977f4-52b0-4fdb-a852-8b3b63a5273e%22%5D%2C%22attrs%22%3A%7B%22.label%22%3A%7B%22text%22%3A%22CONTAINER%22%2C%22ref-y%22%3A0.1%2C%22y-alignment%22%3A%22middle%22%7D%2C%22rect%22%3A%7B%22fill%22%3A%22%22%2C%22opacity%22%3A%220.60%22%7D%7D%7D%2C%7B%22type%22%3A%22devs.Model%22%2C%22size%22%3A%7B%22width%22%3A51%2C%22height%22%3A41%7D%2C%22inPorts%22%3A%5B%22%22%5D%2C%22outPorts%22%3A%5B%22%22%5D%2C%22position%22%3A%7B%22x%22%3A234%2C%22y%22%3A187%7D%2C%22angle%22%3A0%2C%22id%22%3A%22e70977f4-52b0-4fdb-a852-8b3b63a5273e%22%2C%22z%22%3A15%2C%22parent%22%3A%2237a88170-4da8-464d-99f9-32b72097c495%22%2C%22attrs%22%3A%7B%22.%22%3A%7B%22magnet%22%3Atrue%7D%2C%22.port-body%22%3A%7B%22r%22%3A3%7D%2C%22.label%22%3A%7B%22text%22%3A%22%22%2C%22ref-x%22%3A0.4%2C%22ref-y%22%3A0.2%7D%2C%22rect%22%3A%7B%22fill%22%3A%22%23D6F2FC%22%2C%22stroke%22%3A%22%237E7E7E%22%7D%2C%22.inPorts+circle%22%3A%7B%22type%22%3A%22input%22%7D%2C%22.outPorts+circle%22%3A%7B%22type%22%3A%22output%22%7D%2C%22.inPorts%3E.port0%3E.port-label%22%3A%7B%22text%22%3A%22%22%7D%2C%22.inPorts%3E.port0%3E.port-body%22%3A%7B%22port%22%3A%7B%22id%22%3A%22in29%22%2C%22type%22%3A%22in%22%7D%7D%2C%22.inPorts%3E.port0%22%3A%7B%22ref%22%3A%22.body%22%2C%22ref-y%22%3A0.5%7D%2C%22.outPorts%3E.port0%3E.port-label%22%3A%7B%22text%22%3A%22%22%7D%2C%22.outPorts%3E.port0%3E.port-body%22%3A%7B%22port%22%3A%7B%22id%22%3A%22out30%22%2C%22type%22%3A%22out%22%7D%7D%2C%22.outPorts%3E.port0%22%3A%7B%22ref%22%3A%22.body%22%2C%22ref-y%22%3A0.5%2C%22ref-dx%22%3A0%7D%7D%7D%5D%7D%5D"
__proto__: Object
1: Object
2: Object
3: Object
length: 1
__proto__: Array[0]`
但问题是渲染数据以在 jointjs 中查看
如果有人已经解决了，请帮忙。
JointJS'fromJSON 需要格式为 { cells: [...] } 的输入。所以我怀疑如果你使用 { test: JSON.stringify } 保存你的 JSON 你将需要 JSON.parse(result.data) 然后将它传递给 graph.fromJSON.
最终解决方案
graph.fromJSON(JSON.parse(result.data))
检索时，一个名为 JSON_Diagram 的键被附加到 json 数组。 Json 通过 ajax 调用发送必须 return 精确 json 图表才能呈现图表。您需要将 JsonProcessor.do servlet 修复为 return 相同 json。希望这有帮助。