Obray Curry: A dish using Obect and Array- II

Today is another interesting find:

console.clear();

var a ={};
a.p1 = "kiazen";
a["p2"] = "krook";
a[0] = 10;
a[1] = 20;
a[2] = 30;
a[3] = 40;
console.log(a)
console.log(JSON.stringify(a));

console.clear();

var a =[];
a.p1 = "kiazen";
a["p2"] = "krook";
a[0] = 10;
a[1] = 20;
a[2] = 30;
a[3] = 40;
console.log(a)
console.log(JSON.stringify(a));

The catch is

var a= []; 
 //=> this implies 'a' as associative array and not oject

or

var a= {};
 //=> this implies 'a' as object.

So my interpretation leads that serialization of javascript object/array depends on the first initialization fo the object.

Obray Curry: A dish using Obect and Array

Most of us know to write a simple javascript object in object literal notation (JSON) as:

var o = { "p1" : "value1" , "p2" : "value2" };

We also know that, we can add property dynamically as following ways:

• o.p3 = "value3";
• o["p4"] = "value4";

Most of us also know that we can write a simple javascript array object notation (JSON) as :

var arr = [10,20,30];

So far so good. Today I have a question to share.

How about making a curry of array and object.

Ain't that f**king lovely!!!!

var a = [10, 20, 30, 40 ];
a.p1 = "kiazen";
a["p2"] = "krook";

lets execute this code and see the object.
Here is the output::

Questions:
1. What do we call this "a" as object or array ?
     I'll be referring to Obray (object array).

2. How do we represent this Obray.
     My assumed representation:  

{ [ 10, 20, 30 ], "p1": "kiazen", "p2": "krook" }

.

The site jsonlint failed to process my assumed representation

which is absolutely correct as per ECMA-262. scroll below to know exact reason.

Again on the server side, C# allows us to emulate similar structure implementation:

class MyArray[T]
    {
        List[T] _list = new List[T]();
        public string p1 { get; set; }
        public string p2 { get; set; }
        public T this[int i]
        {
            get { return _list[i]; }
            set {
                if (_list.Count < i)
                    _list[i] = value;
                else
                    _list.Add(value);
            }
        }
    }

MyArray[int] obj = new MyArray[int]();
  obj.p1 = "kiazen";
  obj.p2 = "krook";
  obj[0] = 10;
  obj[1] = 20;
  obj[2] = 30;

So far so good, but if we serialize it, what should be the JSON ?

   JsonConvert.SerializeObject(obj);

*used Newtonsoft.Json.dll for object to json conversion.
It gave me the following output:

{"p1":"kiazen","p2":"krook"}

What happened to the array while serialization?
Well thanks to ECMA-262.pdf which tells us about the parsing.
Parsing (serializing/deserializing) is on either object or array. And while serializing, this component will be an object and not an array and hence, the object serialization is happening.

image source: json.org

so there is no options for our Obray, Its either Object or Array !!!

I have raised the same discussion point in json.net development forum [http://json.codeplex.com/discussions/356118]. You are free to put your opinion here.

I think we need some improvisation in json as well ?

soma.js

Soma.js : Javascript MVC

My current assignment asks me to work on javascriptmvc based out of jquery.

Today while googling came across another javascript based mvc framework based of of mootools named soma.js.
The documentation of soma.js much nicer over javascript mvc.

javascriptmvc is suppose to get more success as such since it is commercially driven but I assume soma.js is much cleaner.

So far it is my assumption which I am going to investigate and discover more in it. Definitely I am going to let you all know about it.

Generic Utility for Console Logging

I very much belief that you might have used the following statement in your web development:

console.log(text);

Again the browser must have been firefox or Safari or chrome.
How about the tackling the same in IE ?

I have used a small hack to skip logging in IE and all those browser which does not support console directly.


Here is the code:

utilities = {
    logMessage: function (text) {
        if ((window['console'] !== undefined)) {
            console.log(text);
        }
     }
}

Usage:

utilities.logMessage (" .... message to log...");

Dynamic custom DOM Events - Mouse Event

As always every post has a reason.
Today I needed a solution where i need to invoke a event (rowclick) on a Ext GridPanel's object which is handled by a delegate function.
This invoking is suppose to be from an non DOM event. So the requirement is to MouseClick Event without clicking the mouse.

To clarify more.

Scenario:
I have a Ext.grid.GridPanel and is populated with some records.
Each 'rowclick' event is handled using a delegate function.


Problem Statement:
On an ajax request error event,
Need to add a row on the top and fire 'rowclick' on the same grid.

Solution:
Add a new row to the Grid.
Create a custom click event object.
Find the row HTML element.
Fire the custom click event object  on the row HTML elemnt.

Code:
1.var message = { Message: 'Communication error, server returned unexpected data', Description: message,    
                          Date: new Date() };
2.var rec = new this.store.recordType(message, ++this.counter);
3.this.store.insert(0, rec);


4.var evObj = document.createEvent('MouseEvents');
5.evObj.initEvent('click', true, true);
6. gridObj.getView().getRow(0).dispatchEvent(evObj);

Explanation:
Add a new row to the Grid.

1.var message = { Message: 'Communication error, server returned unexpected data', Description: message,    
                          Date: new Date() };
2.var rec = new this.store.recordType(message, ++this.counter);
3.this.store.insert(0, rec);

Create a custom click event object.

4.var evObj = document.createEvent('MouseEvents');
5.evObj.initEvent('click', true, true);



Find the row HTML element.
6.gridObj.getView().getRow(0).

Fire the custom click event object  on the row HTML elemnt.

6. gridObj.getView().getRow(0).dispatchEvent(evObj);

Thats iT!!!! Bingo.

Reference:  http://www.howtocreate.co.uk/tutorials/javascript/domevents

Json is Strict

I have been using JSON as DTO (Data transfer Object) for quite some time.
Today while educating myself with jquery came across an interesting thing about it.

So far today I knew the following is valid, but i was wrong
{ id : '01', name: 'kris' } <= invalid

It should be

{ id : "01", name: "kris" } <= valid


Refer : http://json.org/ for more information

Extjs accepts the above invalid data but jquery doesn't (as far as i have educated myself in jquery).

Aint that interesting !!!

Lazy Evaluation

var boolV = true || false || true || false || true;
 console.log(boolV); //output is true

Question is did all the operations (logical) got executed ?
Ans is NO.

If several logical operations one after the other, but the result becomes clear at some point before the end of entire operation, then the remaining operations are not performed.

Lets consider the above statement.

var boolV = true || false || true || false || true;

It is before the first local operation it is clear that boolV is  suppose to have value true irrespective of any logical or operation. hence the other logical operations are not executed. in the above statement.

To verify this, we will the following code.

var a =10;
console.log(a); //output 10
console.log(!!++a); //output true
console.log(a);        //output 11
var boolV = true || false || true || false || true || !!++a;
console.log(boolV);  //output true
console.log(a);         //output 11 (which imples the !!++a didn't got executed)
boolV =  !!++a || true || false || true || false || true ;
console.log(boolV); //output true
console.log(a);        //output 12 (which imples the !!++a  got executed)


Ain't that interesting !!!