CODEWITHSUNDEEP
c#jqueryasp.net-mvcjquery-ui
Jeff
Jeff

Reputation: 2313

Convert C# List of object to JavaScript array of objects

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?

Upvotes: 19

Views: 40780

Answers (7)

Sedat Kumcu
Sedat Kumcu

Reputation: 2440

if you are going to use it in a block, the following may be useful.

<script type="text/javascript">
    var DVR_RANGES_VIS_DATASET = [@Json.Serialize(Model.ViewerDvrRanges.Select(p=>new {
        id=1,
        content = "",
        start = p.From,
        end = p.From + p.Duration,
        group = 1
    }).ToList())];
</script>

Upvotes: 0

MarredCheese
MarredCheese

Reputation: 20871

As of .NET Core 3.0, it's simpler.

Instead of doing this in your view:

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

Do this:

var userNameList = @Json.Serialize(Model.GetUsers());

Note that:

  1. Converting keys to camelCase is the default behavior.
  2. The result type is IHtmlContent, which does not need to be wrapped inside @Html.Raw().

Upvotes: 2

satya prakash
satya prakash

Reputation: 97

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))

Upvotes: 1

Ahmed Elbendary
Ahmed Elbendary

Reputation: 379

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

Upvotes: 7

Jeff
Jeff

Reputation: 2313

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.

Upvotes: 2

Colin Young
Colin Young

Reputation: 3058

I assume you are using MVC. WebAPI will default to camelCase while MVC defaults to PascalCase.

See also: Proper JSON serialization in MVC 4 and http://www.matskarlsson.se/blog/serialize-net-objects-as-camelcase-json.

Upvotes: 0

Soner Sevinc
Soner Sevinc

Reputation: 400

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

Upvotes: 2

Related Questions