Reading JSON in joint.js?

Question

I want joint.js library to read my JSON and display it as a chart...

var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 600,
    height: 200,
    model: graph
});

var graph = new joint.dia.Graph;

jsonstring = '{"employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] }';

graph.fromJSON(JSON.parse(jsonstring));

I'm intrigued by a library that has a `fromJSON` method that doesn't accept JSON... — lonesomeday, Nov 20 '13 at 12:47
There is a reason for that. Read https://developer.mozilla.org/en-US/docs/JSON#toJSON()_method and an example of another library: http://backbonejs.org/#Model-toJSON. JSON.stringify calls toJSON() of the object it stringifies recursively. toJSON() is supposed to return an object, not a string. Try: JSON.stringify({ toJSON: function() { return { foo: 'bar' } } }). fromJSON() is the opposite and therefore accepts an object, not a string. — dave, Nov 20 '13 at 14:53

score 4 · Accepted Answer · answered Nov 20 '13 at 13:41

From the API for joint.dia.Graph:

joint.dia.Graph is the model holding all the cells (elements and links) of the diagram. It's a Backbone model. The collection of all the cells is stored in the property cells.

So the expected JSON should be in this form: { cells: [] }. Where cells is an array of both elements and links. Each element should have the form:

{ 
    id: <string>, 
    type: '<type of shape>', 
    attrs: { <attrs> }, 
    position: { x: <int>, y: <int> }, 
    angle: <deg>, 
    size: { width: <int>, height: <int> }, 
    z: <int>, 
    ... and some other, maybe custom, data properties 
}

Reference: Using Server Data with JointJS

Just adding that you usually don't build the JSON by hand but by adding JointJS elements and links to the graph and then stringifying the graph with JSON.stringify(graph). — dave, Nov 20 '13 at 14:46

Reading JSON in joint.js?

1 Answers1