从数据库获取 json 时出错答案

【问题标题】：Error while fetching json from database从数据库获取 json 时出错
【发布时间】：2015-08-03 18:17:49
【问题描述】：

我可以使用以下方法将数据发送到数据库：

$("#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中查看

如果有人已经解决了，请提供帮助。

【问题讨论】：

kittu 你能把你的console.log改成console.log("Result from Database: ", result);然后在控制台看到输出吗？

标签： jointjs

【解决方案1】：

检索时将一个名为JSON_Diagram 的键附加到 json 数组中。通过 ajax 调用发送的 Json 必须返回准确的 json，以便图形呈现图表。您需要修复您的 JsonProcessor.do servlet 以返回相同的 json。希望这会有所帮助。

【讨论】：

【解决方案2】：

JointJS 的fromJSON 需要{ cells: [...] } 格式的输入。所以我怀疑如果你使用{ test: JSON.stringify }保存你的JSON，你需要JSON.parse(result.data)，然后将它传递给graph.fromJSON。

最终解决方案

graph.fromJSON(JSON.parse(result.data))

【讨论】：

我试过你的答案。它给出的错误是这样的：Uncaught SyntaxError: Unexpected token u$.click.$.ajax.success @ index.jsp:333jQuery.Callbacks.fire @ joint.js:2920jQuery.Callbacks.self.fireWith @ joint.js:3032done @ joint.js:7407jQuery.ajaxTransport.send.callback @ joint.js:7829XMLHttpRequest.send (async)jQuery.ajaxTransport.send @ joint.js:7852jQuery.extend.ajax @ joint.js:7308(anonymous function) @ index.jsp:327jQuery.event.dispatch @ joint.js:4683jQuery.event.add.elemData.handle @ joint.js:4367
kittu，你能打印console.log(result)的输出吗（注意输出中没有前面的字符串）？
console.log("Result from Database: ", result); 以对象的形式打印结果。我可以看到对象中的json字符串
我现在如何使用 graph.fromJson 来获得屏幕上的视图？
控制台输出结果如下：`>[Object, Object, Object, Object]