Convert a Dictionary to be used by javascript

Question

I have a controller action which pass a Dictionary to the view by using the ViewBag.

public async Task<ActionResult> MyAction() {
    Dictionary<ATypeViewModel, IEnumerable<BTypeViewModel>> all = await GetDictionary();
    ViewBag.MyData = all;
    return View();
}

Inside the view I need to use this dictionary to create a cascading radio button list. First list would contains the key values like

@{
    Dictionary<ATypeViewModel, IEnumerable<BTypeViewModel>> services = ViewBag.MyData;
}

@foreach ( KeyValuePair<ATypeViewModel, IEnumerable<BTypeViewModel>> entry in services ) {
    <div class="radio">
        <label for="aType"><input type="radio" name="aType" value="@entry.Key.ATypeID" />&nbsp;&nbsp;@entry.Key.Description</label>
    </div>
}

I need jQuery to create this code but unfortunately I dont know how to convert the dictionary to be used by javascript.

EDIT:

Following hutchonoid answer I have serialized my dictionary to json by using Json.NET.

Dictionary<ATypeViewModel, IEnumerable<BTypeViewModel>> list = new Dictionary<ATypeViewModel, IEnumerable<ATypeViewModel>>();
[...]
return await JsonConvert.SerializeObjectAsync( list );

and then added it in my javascript code

var collection = @Html.Raw( Json.Encode(services) );

unfortunately the serialized string is not correct as it is in the following form

var collection = {
    ATypeViewModel: [
        { BTypeID: 11, Description: "..." },
        { BTypeID: 12, Description: "..." },
        { BTypeID: 13, Description: "..." },
        { BTypeID: 14, Description: "..." }
    ],
    ATypeViewModel: [
        { ServiceTypeID: 21, Description: "..." },
        { ServiceTypeID: 22, Description: "..." },
        { ServiceTypeID: 23, Description: "..." },
        { ServiceTypeID: 24, Description: "..." }
    ]
}

Why do the key object does not get serialized correctly?

Answer 1

Using a simple example create a dictionary:

@{
   var services = new Dictionary<string, string> {{"1", "One"},{"2", "Two"}};
 }

Serialize it in your javascript

var collection = @Html.Raw(Json.Encode(services));

Loop it using the each with the key and value:

 $.each(collection, function (key, value) {
               console.log(key);
               console.log(value);
            });

Console output

Update

Based on the structure supplied in the update a nested loop would do this, if the structure changes however you would need to adapt it.

<script type="text/javascript">
    var collection = {
        ATypeViewModel: [
            { BTypeID: 11, Description: "..." },
            { BTypeID: 12, Description: "..." },
            { BTypeID: 13, Description: "..." },
            { BTypeID: 14, Description: "..." }
        ],
        BTypeViewModel: [
            { ServiceTypeID: 21, Description: "..." },
            { ServiceTypeID: 22, Description: "..." },
            { ServiceTypeID: 23, Description: "..." },
            { ServiceTypeID: 24, Description: "..." }
        ]
    }

    $.each(collection, function (outerKey, outerValue) {

        $.each(outerValue, function (key, value) {

                $.each(value, function (innerkey, innervalue) {
                    console.log(innerkey);
                    console.log(innervalue);
                });
            });

        });

 </script>

Please note I needed to change your property to BTypeViewModel from your output.