JSON Response Encoding Troubles

On the project I am currently on, we have had some troubles with some of the JSON responses returned from the server. Specifically if the strings contained escaped characters. We are using ExtJs on this project and upon receiving the response on the client, we were doing an Ext.decode(response.responseText); This was throwing exceptions, like error: unterminated string literal.

All the values that caused problems were escaped characters.
\"
\\
\r
\n
\t

It turns out that those escape sequences in the response are treated as part of the JSON source, not the JSON data. If your data contains escaped characters, the '\' needs to be encoded so that it becomes part of the data, and the Ext.decode(or eval) will then remove the extra '\'. The list above becomes:

\" --> \\\"
\\ --> \\\\
\r --> \\r
\n --> \\n
\t --> \\t

\\ is particularly bad if it is the last character in the data and it is not encoded, as it will combine with the field terminating ", and cause the JSON to fail.

\n or \r, cause the JSON source to have a return in the middle of the JSON, thus invalidating it.

\" will cause the field to prematurely terminate, causing the JSON to fail.

\t is really pretty harmless, as it actually tabs the data, but at least it doesn't cause the JSON to fail. Other ones that may be of concern, but haven't investigated.
\b - backspace
\f - formfeed
\v - vertical tab
\' - single quote(haven't noticed this one being a problem)

Grid Panel as a form panel Element

We recently ran into a little problem in that we needed a grid panel to be displayed on a form panel. It displayed fine but it was left justified and made the form look pretty bad. One of my co-workers stumbled on to an undocumented feature that solves the problem. I just wanted to share it and post it for my own future reference.

For the life of us, we couldn't figure out how to tell the GridPanel to render in the fieldItem column and not the fieldLabel (All the other items let you define a fieldLabel property, but the GridPanel didn't have this option) column of the FormPanel. We finally found out that there is a property that is not documented anywhere, or anywhere that I can find, that tells the GridPanel that it is a formItem. So, in order to treat a GridPanel like a formItem all you have to do is set a property "isFormField" to true, slick huh. Now if you want to, you can also define a fieldLabel for that as well. This will align your GridPanel with all your other fieldItems.

Hope this is helpful.

Manipulating Arrays in JavaScript

In my recent work I have had to do a lot of array manipulation in JavaScript. While doing this I learned a few tricks, that I did not want to forget and thought others might benefit from.

Some of these things are simple, but I include here for completeness. I welcome any feedback on any array tricks that you have learned.

1. Adding to an array
   

   var array = [];
   array.push(5835);

   
   
   
   


2. Deleting from an array
   

   var array =[];
   array.push(5835); // index of 0
   array.push(6835); // index of 1
   array.push(7835); // index of 2
   delete array[1];

   
   The resulting array would be [5835, 7835], but the indexes would still be [0,2]. JavaScript does not reorder the indexes to always be zero based.
   
   
   


3. Array Looping
   
   Although you can loop through an array normally:
   

   
   for(var i = 0; i < array.length; i++) {
     alert("Index was " + i + ", value was " + array[i]);
   } 

   
   You can get into trouble, if you are doing array manipulation like deleting. Like I stated in #2, there is no more index 1, so you would get a JavaScript error.
   Because of this I have become a fan of the following loop:
   

   
   for(var i in array) {
     if (typeof array[i] == "function") {
       continue;
     }
     alert("Index was " + i + ", value was " + array[i]);
   }

   
   A couple of things to note, first is the check to make sure the element is not a function. All arrays have a remove method inherent in them, so you need to skip that. Second, you will see that the indexes are indeed, 0, 2 and not 0, 1, if you use the dataset from #2.
   
   
   

More to come later...