return the graph structure of a Neo4j cypher query using jquery

Question

based on The Neo4j docs , executing:

:POST /db/data/transaction/commit
  {"statements":[{"statement":"MATCH path = (n)-[r]->(m) RETURN path",
                  "resultDataContents":["graph","row"]}]}

in the neo4j browser returns the graph structure plus the rows. I wonder how can I specify ( "resultDataContents":["graph","row"] ) in a jQuery ajax request. I have tried this which doesn't work:

var request = $.ajax({
    type: "POST",
    url: "http://localhost:7474/db/data/cypher",
    accepts: { json: "application/json" },
    dataType: "json",
    contentType:"application/json",
    data: JSON.stringify({ "query" : "MATCH (n)--(m) RETURN n,m LIMIT 2", "params": {"resultDataContents":["graph","row"]} })
});

Essentially I want to build a neo4j browser clone where I can submit queries and receive the results and perhaps visualize them.

Answer 1

The result data formats are only available through the cypher http transactional endpoint : http://neo4j.com/docs/stable/rest-api-transactional.html#rest-api-return-results-in-graph-format

Which is the one used by the neo4j browser. Notice the difference between the two urls you mention.

Answer 2

Here is the whole procedure from query to obtaining the nodes and links of the graph.

Note that the neo4j docs (Converting Neo4j Query Results to D3 JSON) has an error : replace start with source and end with target if you want to use the graph for force directed layout.

// The query
var query= {"statements":[{"statement":"MATCH p=(n)-->(m)<--(k),(n)--(k) RETURN p Limit 100",
    "resultDataContents":["graph","row"]}]};

//the helper function provided by neo4j documents
function idIndex(a,id) {
    for (var i=0;i<a.length;i++) {
        if (a[i].id == id) return i;}
    return null;
}
// jQuery ajax call
var request = $.ajax({
    type: "POST",
    url: "http://localhost:7474/db/data/transaction/commit",
    accepts: { json: "application/json" },
    dataType: "json",
    contentType:"application/json",
    data: JSON.stringify(query),
    //now pass a callback to success to do something with the data
    success: function (data) {
        // parsing the output of neo4j rest api
        data.results[0].data.forEach(function (row) {
            row.graph.nodes.forEach(function (n) {
                if (idIndex(nodes,n.id) == null){
                    nodes.push({id:n.id,label:n.labels[0],title:n.properties.name});
                }
            });
            links = links.concat( row.graph.relationships.map(function(r) {
                // the neo4j documents has an error : replace start with source and end with target
                return {source:idIndex(nodes,r.startNode),target:idIndex(nodes,r.endNode),type:r.type};
            }));
        });
        var graph = {nodes:nodes, links:links};

        // Now do something awesome with the graph!

    }

});