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?

Either of those outputs should work fine. What's the issue you're having? — Jason P
– Jason P, Commented Sep 23, 2013 at 18:37
[ { label: "Choice1", value: "value1" }, ... ] is functionally equivalent to [ { "label": "Choice1", "value": "value1" }, ... ], or are you experiencing a problem? — Rob G
– Rob G, Commented Sep 23, 2013 at 18:37
I was hit with the same. Just to get past this, I went with lower-cased properties. You might find an attribute decoration to control the name that's used during serialization but I don't see anything immediately available unless you're using the Newtonsoft library: stackoverflow.com/questions/8796618/… — Erik Noren
– Erik Noren, Commented Sep 23, 2013 at 19:27
After a deeper look, it seems MVC uses JavaScriptSerializer which doesn't respect [DataMember] attributes like JSON.NET does. stackoverflow.com/questions/12497124/… so you can either switch to JSON.NET or look at this: stackoverflow.com/questions/1302946/… — Erik Noren
– Erik Noren, Commented Sep 23, 2013 at 19:31

Ahmed Elbendary · Accepted Answer · 2018-05-02 08:01:17Z

7

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

answered May 2, 2018 at 8:01

Ahmed Elbendary

3795 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

keji Over a year ago

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

Community · Accepted Answer · 2017-05-23 12:18:33Z

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

Jeff · Accepted Answer · 2013-09-26 16:01:53Z

2

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.

answered Sep 26, 2013 at 16:01

Jeff

2,3139 gold badges34 silver badges52 bronze badges

1 Comment

Cody Over a year ago

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.

MarredCheese · Accepted Answer · 2020-06-16 00:51:35Z

2

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:

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

answered Jun 16, 2020 at 0:51

MarredCheese

21.3k12 gold badges109 silver badges105 bronze badges

Comments

satya prakash · Accepted Answer · 2019-03-12 14:15:32Z

1

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

answered Mar 12, 2019 at 14:15

satya prakash

971 silver badge5 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:55:13Z

0

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.

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Sep 23, 2013 at 19:12

Colin Young

3,0881 gold badge26 silver badges48 bronze badges

Comments

Sedat Kumcu · Accepted Answer · 2024-05-30 07:22:44Z

0

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>

answered May 30, 2024 at 7:22

Sedat Kumcu

2,4801 gold badge19 silver badges13 bronze badges

Collectives™ on Stack Overflow

Convert C# List of object to JavaScript array of objects

7 Answers 7

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related