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();
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;
}
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() {
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') {
alert(emp.Name);
alert(emp.Age);
alert(emp.Salary);
}
else {
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