问题
I am able to send data to db using the following:
$("#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
}
});
});
But while fetching I get error in chrome console like this:
Uncaught Error: Graph JSON must contain cells array
Code to fetch data:
$("#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);
}
});
});
I can see the object fetched in chrome console like this: [object Object] and when I expand it
`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]`
but problem is rendering the data on to view in jointjs
Please help if any body have already worked it out.
回答1:
A key called JSON_Diagram is appended to json array when retrieving it. Json sent via ajax call must return exact json for the graph to render the diagram. You need to fix your JsonProcessor.do servlet to return same json. Hope this helps.
回答2:
JointJS' fromJSON expects an input of the format { cells: [...] }. So I suspect that if you're saving your JSON using { test: JSON.stringify } you will need to JSON.parse(result.data) and then pass it to graph.fromJSON.
Final solution
graph.fromJSON(JSON.parse(result.data))
来源：https://stackoverflow.com/questions/31794098/error-while-fetching-json-from-database