Halaman Utama

Sabtu, 31 Januari 2015

Javascript Dictionary

Ini pelajaran javascript...bisa buat kamus ,hitungan.hitungan.dsb..atau yang lainnya..blajal sendiri ya.
---------------------------------------------------------------

I don't know, may be some of you already know this... But I recently, worked onJavaScript 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 aDictionary 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 thedictionary 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 usingJavaScriptSerializer 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 namespaceSystem.Web.Script.Serialization for serializing the data in C#. Also included is the JSON JavaScript file to parse the data.Happy client scripting!Thanks,....http://www.codeproject.com/Articles/117002/Javascript-Dictionary