Question

Parsing json returned from the controller. For some reason when returning a dictionary I need to do “ToString()” on the key element, otherwise I get an error. Why?. Are the samples below the correct way/best way to serialize json? thanks

Controller:

    // JSON
    public ActionResult GizmosJsonObject()
    {
        var gizmo = new Gizmo
        {
            Id = 2343,
            Name = "Some awesome name",
            Quantity = 32,
            IntroducedDate = DateTime.Now
        };

        return this.Json(gizmo);
    }

    public ActionResult GizmosJsonObjectCollection()
    {
        var gizmos = new List<Gizmo>();
        gizmos.Add(new Gizmo
        {
            Id = 102,
            Name = "some name1",
            Quantity = 535,
            IntroducedDate = DateTime.Now
        });

        gizmos.Add(new Gizmo
        {
            Id = 122,
            Name = "some name1",
            Quantity = 135,
            IntroducedDate = DateTime.Now
        });

        gizmos.Add(new Gizmo
        {
            Id = 562,
            Name = "some name1",
            Quantity = 2,
            IntroducedDate = DateTime.Now
        });

        return this.Json(gizmos);
    }

    public ActionResult GizmosJsonListInts()
    {
        var gizmos = new List<int>();
        gizmos.Add(2);
        gizmos.Add(56);
        gizmos.Add(32);

        return this.Json(gizmos);
    }

    public ActionResult GizmosJsonDictionaryInts()
    {
        var gizmos = new Dictionary<int, int>();
        gizmos.Add(23, 123);
        gizmos.Add(26, 227);
        gizmos.Add(54, 94323);

        return this.Json(gizmos.ToDictionary(x => x.Key.ToString(), y => y.Value));
    }

    public ActionResult GizmosJsonDictionaryStrings()
    {
        var gizmos = new Dictionary<string, string>();
        gizmos.Add("key1", "value1");
        gizmos.Add("Key2", "value2");
        gizmos.Add("key3", "value3");

        return this.Json(gizmos);
    }

View:

<script type="text/javascript">
/*<![CDATA[*/
    $(function () {

        // json object
        $("a.Object").click(function (e) {
            e.preventDefault();
            $.ajax({
                url: '@Url.Action("GizmosJsonObject", "Home")',
                contentType: 'application/json',
                type: 'POST',
                success: function (json) {
                    console.log(json.Id);
                    console.log(json.Name);
                    console.log(json.IntroducedDate);

                    // format date
                    var date = new Date(parseInt(json.IntroducedDate.substr(6)));
                    console.log(date);
                }
            });
        });

        // json object collection
        $("a.ObjectCollection").click(function (e) {
            e.preventDefault();
            $.ajax({
                url: '@Url.Action("GizmosJsonObjectCollection", "Home")',
                contentType: 'application/json',
                type: 'POST',
                success: function (json) {
                    $(json).each(function () {
                        console.log(this.Id);
                        console.log(this.Name);
                        console.log(this.IntroducedDate);

                        // format date
                        var date = new Date(parseInt(this.IntroducedDate.substr(6)));
                        console.log(date);
                    });
                }
            });
        });

        // json list of ints
        $("a.ListInts").click(function (e) {
            e.preventDefault();
            $.ajax({
                url: '@Url.Action("GizmosJsonListInts", "Home")',
                contentType: 'application/json',
                type: 'POST',
                success: function (json) {
                    $(json).each(function (i, e) {
                        console.log(json[i]);
                    });
                }
            });
        });

        // json dictionary of ints
        $("a.DictionaryInts").click(function (e) {
            e.preventDefault();
            $.ajax({
                url: '@Url.Action("GizmosJsonDictionaryInts", "Home")',
                contentType: 'application/json',
                type: 'POST',
                success: function (json) {
                    for (var key in json) {
                        if (json.hasOwnProperty(key)) {
                            var value = json[key];
                            console.log(key);
                            console.log(value);
                        }
                    }
                }
            });
        });

        // json dictionary of strings
        $("a.DictionaryStrings").click(function (e) {
            e.preventDefault();
            $.ajax({
                url: '@Url.Action("GizmosJsonDictionaryStrings", "Home")',
                contentType: 'application/json',
                type: 'POST',
                success: function (json) {
                    for (var key in json) {
                        if (json.hasOwnProperty(key)) {
                            var value = json[key];
                            console.log(key);
                            console.log(value);
                        }
                    }
                }
            });
        });
    });
/*]]>*/
</script>

Answer 1

A JSON key must be of the type string. See the right sidebar here http://www.json.org/ where it states that a pair must take the form of string: value.

---

Just for corroboration, this document here http://www.ietf.org/rfc/rfc4627.txt states the following:

2.2. Objects

An object structure is represented as a pair of curly brackets
surrounding zero or more name/value pairs (or members). A name is a
string. A single colon comes after each name, separating the name
from the value. A single comma separates a value from a following
name. The names within an object SHOULD be unique.