Javascript Dictionary

I don't know, may be some of you already know this... But I recently, worked on JavaScript dictionary. And that was really interesting. So I wanted to share my findings with you all. Please share your feedback about my post.

JavaScript provides us a way to make a Dictionary object and use it same like a C# dictionary. Although we would not be having all the properties that are supported by C# dictionary, we will be able to use it as dictionary, i.e. in key value format.

Let’s see one simple example:

I have stored a list of all weekdays as keys and assigned some numbers to these as values. Let’s see the code.

function CreateDayDictionary() {
var days = new Array();
days['Sunday'] = 1;
days['Monday'] = 2;
days['Tuesday'] = 3;
days['Wednesday'] = 4;
days['Thursday'] = 5;
days['Friday'] = 6;
days['Saturday'] = 7;
}

Now to fetch it any point of time… we can fetch it like this. Here, I have made a function to alert some data. It can be as:

function ShowDays() {
       alert(days['Sunday']);
       alert(days['Thursday']);
       alert(days['Saturday']);
   }

It will show three alerts. First 1 then 5 and at last 7.

So, we can store some global data in our page. And this data we can access, at different events we require.

Similarly, we can store objects in the dictionary in the same way. Let’s see the code:

function CreateDictionarywithObject() {
       var objDictionary = new Array();
       // Creating a dictionary which is holding five objects
       for (var i = 0; i < 5; i++) {

           var obj= new myClass();
           obj.member1 = 'member1data' + i;
           obj.member2 = 'member2data' + i;
           obj.member3 = 'member3data' + i;

           objDictionary['Obj' + i] = obj;
       }
       //Fetching third Object
       var fetchedObj = objDictionary['Obj3'];
       alert(fetchedObj.member1);
       alert(fetchedObj.member2);
       alert(fetchedObj.member3);
   }

Now, one more thing if you want to pass the data from server to client as JSon data, you can serialize a C# dictionary at server side, and again when you will desteralize at client side, you will be getting the dictionary as we discussed above. Let’s see the magic.

Here I have made one class Employee as:

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Salary { get; set; }
    public int Age { get; set; }
}

Now, on page load, I created a dictionary with some data, like below:

List<Employee> employees= new List<Employee>()
        {
            new Employee{ Id=1000, Name="Brij", Age=27, Salary=800000},
            new Employee {Id=1001, Name = "Rahul", Age=28,Salary=500000},
            new Employee {Id=1002, Name = "Anoop", Age= 29 ,Salary = 60000}
        };
Dictionary<string, Employee> employeeData = employees.ToDictionary
				(em => em.Id.ToString(), emp => emp);

Now serialize data using JavaScriptSerializer and assign in a hidden variable:

JavaScriptSerializer ser = new JavaScriptSerializer();

hfData.Value = ser.Serialize(employeeData);

Now I have a textbox and a button to show employee details. My aspx code looks like this:

<div>
        <span>Id: </span>  <input id="idName" />

        <input id="Button2" onclick="show();" type="button" value="Displaydetail" />
        <hiddenfield id="hfData" runat="server" />
    </div>

Here, I will be entering the Id of the employee, and on clicking the button “Show details”, I am displaying the data as a JavaScript alert. So let’s see the JavaScript code:

function parseEmployeeData() {
        //for parsing the data
        employees = JSON.parse(document.getElementById("<%= hfData.ClientID%>").value);
    }

    function show() {
        parseEmployeeData();
        var key = document.getElementById('idName').value;
        var emp = employees[key];
        if (typeof (emp) != 'undefined') {
        // If key is found then display the details
            alert(emp.Name);
            alert(emp.Age);
            alert(emp.Salary);
        }
        else {
        // key not found
            alert('No data found');
        }
    }

As you can see, first I am parsing the data using json, then finding the key in the dictionary and displaying the details as a JavaScript alert.

This sample is just for an example, to show how we can use JavaScript dictionary in our daily lives.

Here, I have used namespace System.Web.Script.Serialization for serializing the data in C#. Also included is the JSON JavaScript file to parse the data.

Happy client scripting!

Thanks,

Brij