CODEWITHSUNDEEP
javascriptasp.net-mvcjsondictionaryassociative-array
leora
leora

Reputation: 196539

Can you convert C# dictionary to Javascript associative array using asp.net mvc Json()

I recently asked this question, but after some of the responses and some research, i wanted to change what i was actually asking.

i have seen a number of blog posts about sending associative arrays from javascript to C# controller action but i want the opposite. I want to return json to a client as a dictionary (from my research the javascript equivalent of dictionary is an associative array).

when i take a regular dictionary in c sharp and call Json() on it and try to return it to javascript, it just blows up and i am unable to even put a breakpoint on the javascript side. For example:

C# Code:

  Dictionary<string, List<CalendarEvent>> dict = events.GroupBy(r => r.Date.ToString("MMM dd, yyyy")).ToDictionary(group => group.Key, group => group.ToList());

    return Json(new
       {
         Dict = dict
       }
    });

Javascript Code:

    $.post('/MyController/Refresh', function (data) {

           var calendarDictionary = data.Dict;

    }, "json");

Upvotes: 13

Views: 19857

Answers (4)

James Sumners
James Sumners

Reputation: 14777

You might want to look at the Json.NET library. It makes creating JSON representations of .Net objects very simple.

Upvotes: 2

Darin Dimitrov
Darin Dimitrov

Reputation: 1038890

You probably could have been a little more specific about the it just blows up part but here's an example that works fine for me:

Model:

public class CalendarEvent
{
    public string Name { get; set; }
    public DateTime Date { get; set; }
    public int Id { get; set; }
}

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Refresh()
    {
        var model = new[]
        {
            new CalendarEvent 
            {
                Id = 1,
                Name = "event 1",
                Date = DateTime.Now
            },
            new CalendarEvent 
            {
                Id = 2,
                Name = "event 2",
                Date = DateTime.Now
            },
            new CalendarEvent 
            {
                Id = 3,
                Name = "event 3",
                Date = DateTime.Now.AddDays(2)
            },
        }
        .ToList()
        .ConvertAll(a => new
        {
            a.Name,
            a.Id,
            Date = a.Date.ToString("MMM dd, yyyy"),
        })
        .GroupBy(r => r.Date)
        .ToDictionary(
            group => group.Key, 
            group => group.Select(x => new { x.Name, x.Id })
        );
        return Json(new { Dict = model });
    }
}

View:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>    
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JSON Test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $.post('/home/refresh', function(data) {
            // TODO : manipulate the data.Dict here
        }, 'json');
    });
    </script>
</head>
<body>

</body>
</html>

Returned JSON:

{ "Dict": { "Sep 05, 2010": [ { "Name": "event 1", "Id": 1 },
                              { "Name": "event 2", "Id": 2 } ],
            "Sep 07, 2010": [ { "Name": "event 3", "Id": 3 } ] } }

Upvotes: 11

ScottE
ScottE

Reputation: 21630

Your code isn't valid - perhaps a typo?

$.post('/MyController/Refresh', function (data) {

           var calendarDictionary = data.Dict;

    }, "json");

Also, I've seen cases where a method needs the data param, even if it's empty {}.

Finally, the json should come back inside data.d - use firebug to console.log the response.

Upvotes: 0

Davy Meers
Davy Meers

Reputation: 1798

In json you have two main structures: an "array", this is a list of element, and an "object", a group of key-value pairs.

So for what you want to achieve the json method has to return a json object (debug the server side to see what is actually send to the client).

In javascript the json object will be directly mapped to a javascript object, and in javascript objects are also associative arrays

So to summarize:

Make sure the server returns a json object, then you can use it as some kind of dictionary in javascript.

Upvotes: 2

Related Questions