navigation
 Wednesday, June 20, 2007

Today I worked on an AJAX application that uses JSON over xmlhttp to provide a quick search feature in our product ActiveFocus. Here you can see it in action: as you type in the searchbox, each time a key is pressed, the search string is sent to the server, a freetext search is done against the database, the results are returned in a JSON array, and then rendered as a HTML table:

Originally, this was hand coded in JavaScript at a very low level, using an ASP.Net 2.0 page on the server side to create and return the JSON object. The task at hand was to convert this to a more high level approach using Teleriks RadServiceManager to call a ASP.Net 2.0 Web Service, which returns a standard .NET type that is automatically converted to a JSON object.

In my Search Web Service, I return an array of SearchResultRows:

public struct SearchResultRow
{
  public int ID;
  public string ArtifactType;
  // ...
}

[WebMethod(EnableSession = true)]
public SearchResultRow[] ArtifactSearch( string searchKey)
{
  //…

This was amazingly straight forward. On the client side, when the callback returns, you can access the array through JSON indexing, something like this:

function CallSearch( searchKey )
{
  Search.ArtifactSearch(
    searchKey,
    SearchServiceCompleteCallback, SearchErrorCallback);
}


function SearchServiceCompleteCallback(ResponseAsJSON, ResponseAsXml, ResponseAsText)
{
  var Results = ResponseAsJSON;
  for( i=0; i < Results.length; i++)
  {
    // …
 

After debugging it in FireFox/FireBug (highly recommended! See article by my colleague Noel), I switched back to Internet Explorer 7.0 to test it there, confident that all was well. At first, the search behaved just like it should. But when I typed a search phrase that narrowed the search down to just one record in the returned array, I suddenly found that the table of results did not get displayed at all. It would display two or more results, but not one!

Intrigued, I switched back to FireBug to debug the mystery. But in FireFox, a one row array worked just fine. I could inspect the value of Results and see the JSON encoding, and verify that it was correct. So, I switched back to IE, this time using the VS 2005 IDE Script Debugger, which is pretty primitive compared to FireBug, but I had no choice.

Now, when I went to inspect Results, I found something very strange. When two or more records were returned, the JSON looked just like the FireFox version:

But when the call only returned one row, the JSON object had a different layout! Instead of a JSON  array of SearhResultRow records, there was an inner object named the same thing as the type of the array elements (SearchResultRow), which contained the field values for that one record!

Go figure!

At this point I had spent way too much time debugging and needed to get the job done, so I just added a check to see if the singleton format was present and handled the two different cases in seprate branches of the if statement, which did the trick.

However, I am curious as to whether this is a bug or not. Clearly, it is the same code running both server side and client side, yet in the two main browser versions, the JSON objects differ for one record arrays.

Let me know if you have any input! If not, maybe at least this blog will save you some debugging time…