JavaScript trick: Use two dimensional array as enum to get value

Ever thought of using Enum in JavaScript? Probably every developer thinks about it. I wanted to use two dimensional JavaScript array similar to Enum in C# and also wanted to use it as key value pair. And there is a way by which you can use it like Enum and then like a key value pair.

Let's declare an array first.

var browsers = { "Microsoft": "IE", "Google": "Chrome", "Apple": "Safari", "Opera": "Opera" };

This array lists companies and their browsers. My aim is to use it like Enum and then retrieve browser's name when company name is selected.

To get a browser by Microsoft, let's use following syntax:
var msBrowser = browsers.Microsoft;

You can observe that the syntax is very similar to Enum and it returns the value 'IE'.

This article might be very foolish for many. But may help learners like me. Who are you?

MVC: Passing C# enum collection as JSON object in model along with view

Okay...today I am gonna write about very weird requirement and a solution. I don't know how many of you already got into such scenario, but let's see what is it and then I would like to know if there is anything better.

What was my requirement?

Eternal question in developers' life, WHAT IS THE REQUIREMENT DUDE? And the answer is...

I had created a simple view using Razor syntax. I had created a model to bind it. I wanted to pass a collection of enum values to view and use that in JavaScript.

 Here is my model class

public class UserDetails

{

    public string UserName { get; set; }

    public string UserEmail { get; set; }

    public string City { get; set; }

}

To achieve my goal I added a property of type string to the model class and class looks like

public class UserDetails

{

     public string UserName { get; set; }

     public string UserEmail { get; set; }

     public string City { get; set; }

     public string Hobbies { get; set; }

}

Here is the enum of hobbies:

public enum Hobby : int

{

   Reading = 500,

   Writing,

   Sports,

   Music

} 

Action method looks like this:

public ActionResult GetUserDetails(int userId)

{

     // Get user details

     UserDetails userDetails = Utility.GetUserDetailsById(userId);

 

     //Get hobbies

     Collection<Hobby> hobbies = Utility.GetHobbiesByUserId(userId);

         

     // Create serializer object

System.Web.Script.Serialization.JavaScriptSerializer javaScriptSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();

     // Serialize the object

     userDetails.HobbiesString = javaScriptSerializer.Serialize(hobbies);

     return View();

} 

Key line of code to notice here is use of JavaScriptSerializer. When I serialize the collection object using this serializer it returns serialized string. I set that to newly added property of type string and return view.

In view I get this string from the model object. To use it in JavaScript, I used JQuery’s parseJSON function as follows:

var hobbies = $.parseJSON('@Model.HobbiesString');

I got following array as a result:

[‘502’, ’503’, ‘504’]

Conclusion:

I learnt something new about use of JavaScript serializer. You can do fancy things using it. Do share your experiences too.