JSON and Prototype

This snippet describes how to send a JSON response from a Stripes action. Whereas the AJAX How-To article describes using Prototype's popular 'Ajax.Updater,' this uses Prototype's more granular 'Ajax.Request' in a shopping cart example.

First, add the relevant .java files. (You can also use JSON Tools, however it uses a different API to that described here.)

The action itself is similar to Calculator's:

Stripes action

public Resolution displayCart()
{
	this.shoppingCart = ShoppingCartManager.getById(this.cartId);
	return new StreamingResolution("text", new StringReader(this.shoppingCart.JSONCart()));
}

The only noteworthy difference is that the string it returns is a JSON object.
To see what this.shoppingCart.JSONCart() does, we peek into the DAO object:

JSONCart()

public String JSONCart()
{
	// create a JSONObject to hold relevant info for each item in cart and stuff all of these objects in a JSONArray
	JSONArray itemList = new JSONArray();
	for (CartItem item : this.getItems()) {
		JSONObject ci= new JSONObject();
		ci.put("productId", item.getProduct().getId());
		ci.put("name", item.getProduct().getLabel()); // product name
		ci.put("price", item.getProduct().getPrice());
		ci.put("quantity", item.getQuantity());
		itemList.put(ci);
	}

	  // place the array of item objects as well as other info inside another JSONObject for transport
	  JSONObject jsonObj = new JSONObject();
	  jsonObj.put("cartId", this.getId());
	  jsonObj.put("otherStuff", this.getStuff());
	  jsonObj.put("itemList", itemList);

	  // return the object as a JSON String
	  return jsonObj.toString();
}

This might generate a string like:

Sample JSON string

{"cartId": 666, "otherStuff" : "moohahaha", "itemList": [{"productId" : 42, "name" : "brimstone", "price" : $6.66, "quantity" : 2000}]}

Now some javascript to retrieve the results and do something:

sample javascript

function displayCart(ajaxResponse)
{
   var JSONobj = eval('('+ ajaxResponse.responseText +')');

   if (JSONobj.cartId == 666)
   {
      $('promotions').innerHTML = "You win a free ton of brimstone!";
   }

   html = "<div class='items'>";
   for (var i=0; i< JSONobj.itemList.length; i++)
		{
			var item = JSONobj.itemList[i];
			html += "<li>" + item.name + "</li">
			---snip---
		}

		new Insertion.Bottom('cart', html);
}

The eval statement var JSONobj = eval('('+ ajaxResponse.responseText +')'); takes the returned JSON stream and converts it into a JavaScript object, which can be accessed in the rest of your script. (note: rather than eval, it might be safer to use a JavaScript JSON parser.)

JSON and Prototype

Labels