Using jQuery and ajax to input nodes into a neo4j REST server

Posted on Apr 21, 2011 in Web Dev | 4 comments

Okay, let’s get one thing straight: if you’re reading this post you probably found it by Googling for terms like “jquery,” “neo4j”, and “ajax.” I assume that because when I dealt with this topic I searched for those same terms and couldn’t find much that helped me. Once I figured it out I decided I’d post what I’d learned to help others in the same boat. On the other hand, if you’re here because you’re among the handful or so faithful readers (hi Mom!) you’ll probably want to skip this post.

This post assumes that you:

1. Are familiar with javascript and jQuery, specifically;
2. Have a web app or web page created in which you’re trying to create Neo4j nodes;
3. Have installed and have running up a local installation of the Neo4j REST server;
4. Have reviewed the REST server documentation posted on Neo4j’s site.

It’s this last point that prompted me to write this post. The REST server documentation is great if you’re using cURL to input and manage nodes. I’m not sure about you, but I don’t write a lot of web-apps from a command line; I write them in javascript and jQuery! I wanted to set up AJAX calls in my web-app that would perform CRUD operations on nodes: CReate, Update, and Delete. After a lot of playing around with jQuery’s $.ajax() method I succeeded and wanted to share the code to help others looking to do the same thing. Let’s dive into the code; an explanation will follow.

jQuery code snippet to insert a node into neo4j

var nodeObject = {
	"type": $("#node-type").val(),
	"name": $("#node-name").val(),
	"lat": $("#node-latitude").val(),
	"long": $("#node-longitude").val(),
};
var restServerURL = "http://localhost:7474/db/data";
$.ajax({
	type: "POST",
	url: restServerURL + "/node",
	data: JSON.stringify(nodeObject),
	dataType: "json",
	contentType: "application/json",
	success: function( data, xhr, textStatus ) {
		// process the returned node data however you need
	},
	error: function( xhr ) {
		window.console && console.log( xhr );
	},
	complete: function() {
		alert("Address of new node: " + data.self);
	}
});

Line-by-line explanation

1. Define a javascript object comprising the node’s properties. What properties you are storing will vary depending on what you’re trying to achieve, of course. This example has four properties, the value of which is determined by jQuery calls to get the user inputs in the specified fields. You could hard-code these or do whatever you want (remember my first assumption, that you “know javascript?” ;-)
2. Define the URL for the neo4j REST server. This is the default localhost installation and port; you may need to adjust yours. note that it’s just the URL to /data. This will allow us to build specific URLs for the different CRUD operations as necessary while making it easy to update the code if the server address changes.
3. Begin the jQuery $.ajax() call.
4. “POST” is the type of call because we are creating a node.
5. The submission URL is the variable defined first with /node tacked on as per the REST server requirements.
6. Pass the properties to the REST server as JSON data with javascript’s native JSON.stringify() method.
7. Specify the data type being sent as JSON.
8. Specify that you expect JSON data back from the REST server.
9. Define a function to handle data coming back from the REST server when the node is successfully created. If you’re not sure what is returned, you can display it in webkit-based browsers (or Firefox with Firebug installed) with console.log( data ). Of course, you need to have the web inspector showing to see that output. (Side note: always use window.console && console.log() when outputting to the console. If you don’t, and you—or worse, a client—view the site in IE you’ll get JS errors.
10. Define a function to handle error cases. Again, you can inspect the XmlHttpRequest() object (called simply xhr here) to see what comes back.
11. If you like, you can also define a function to handle anything that happens after either a successful or unsuccessful call. This is where you might alert the user of the new node’s creation (or lack of it if an error occurred).

Other neo4j actions: updating properties, deleting nodes, etc.

The example code above works to submit new nodes to the graph. To update or delete nodes (not to mention working with relationships) you’ll need to adjust the URL and the HTTP verb (GET, PUT, POST, DELETE) in the code. Rather than post more code here I’ll refer you again to the REST server documentation that neo4j provides; it should easy to update the AJAX call above to suit your needs.

Of course you could always take a REST from coding and POST questions or thoughts in the comments. (Sorry, couldn’t resist the puns.)

Related: If you liked this, check out:

1. Better living through bookmarklets: JSON prettifier Lately I've been working with web services that return data...
2. Improve page load times by compressing code; or, "mnfy ur JS" Web applications are growing more popular every day. That's great...
3. Reading too much into webserver file names Here's my observation: On Apache/Linux-based web servers, the file within...
4. Javascript snippet to convert to military time Military time is sort of a misnomer: there are plenty...
5. Tricking an HTML form to POST with unselected radio inputs This web-development situation confused me: why wasn't my simple form,...