Convert C# List of object to JavaScript array of objects

Question

I am using jQueryUI's autocomplete to allow the search of users. The documentation states that I am able to use an array for the source of the data in the following format: [ { label: "Choice1", value: "value1" }, ... ]

I have a base class that provides a list of unique Users which is inherited by my view-model. The view model has the following function:

public List<TestJson> GetUsers()
{
    return AvailableUsers
        .Select(u => new TestJson
            {
                Label = u.LastName + ", " + u.FirstName + "(" + u.UserId + ")",
                Value = u.UserId
            }).ToList();
}

public class TestJson
{
    public string Label { set; get; }
    public string Value { get; set; }
}

In my view, I use the above like so:

var userNameList = @Html.Raw(Json.Encode(Model.GetUsers()));

$("#UserName").autocomplete({
    source:userNameList 
});

Turns out userNameList is showing up like this:

[ { "Label": "Choice1", "Value": "value1" }, ... ]

instead of:

[ { label: "Choice1", value: "value1" }, ... ]

How can I get my array to show in the correct format?

EDIT: Based on input from comments, I have verified that both those formats are indeed functionally equivalent. I did a little more testing and it turns out that label and value are case sensitive. Changing my members to lower case seems to do the trick, but I don't feel that solution is the best. Any suggestions on how to change the string on the left side of the : (what is this called?) to lowercase?

Solution 1

Comments by Jason P and Rob G are correct. The two formats in questions are equivalent. Turns out my issue was with the casing. DOH!

I just changed the properties in my class to be lower case. Thought, I would love to see an alternate solution. I will choose this one until a better one is submitted.

Solution 2

        //View.cshtml
<script type="text/javascript">
    var arrayOfArrays = JSON.parse('@Html.Raw(Json.Encode(Model.GetUsers()))');
</script>

Solution 3

A simple Employee object:

public class Employee
{
public string Name { get; set; }
public string Age { get; set; }
public string ID { get; set; }   
}

Adding some instances of them to a List:

Employee oEmployee1 = 
new Employee{Name="Pini",ID="111", Age="30"};

Employee oEmployee2 = 
new Employee { Name = "Yaniv", ID = "Cohen", Age = "31" };
Employee oEmployee3 = 
new Employee { Name = "Yoni", ID = "Biton", Age = "20" };

List<Employee> oList = new List<Employee>() 
{ oEmployee1, oEmployee2, oEmployee3 };

Serializing then:

System.Web.Script.Serialization.JavaScriptSerializer oSerializer = 
new System.Web.Script.Serialization.JavaScriptSerializer();
string sJSON = oSerializer.Serialize(oList);

And here is the output:

[{"Name":"Pini","Age":"30","ID":"111"},
{"Name":"Yaniv","Age":"31","ID":"Cohen"},
{"Name":"Yoni","Age":"20","ID":"Biton"}]

Also below link has similar example

Convert Object to JSON in MVC 4

Solution 4

If you passing List of object though MVC model and want to store it an array variable in script section on .cshtml page PFB code snipt :-

@Html.Raw(Json.Encode(Model.ListPropertyName))

View more solutions

Comments

[Cody]

Came here to figure out how to convert a C# list of objects to a javascript array of objects -- your problem was my solution. Thanks.

[keji]

JSON = JavaScript Object Notation so if it's a valid JavaScript object is there even a need to parse it? var arrayOfArrays = @Html.Raw(Json.Encode(Model.GetUsers());