Format JSON from controller for use by a plugin

Question

I'm getting a JSON string from my controller:

    public ActionResult Highlight()
    {
        var statesHighlight =
            db.Jobs
                .Select(r => r.Location);
        return Json(statesHighlight , JsonRequestBehavior.AllowGet);
    }

I'm getting it via an Ajax request like so:

    $.ajax({
    async: false,
    url: '@Url.Action("Highlight", "Jobs1")',
    data: JSON.stringify(),
    type: 'POST',
    success: function (data) {
        citydata = data;
    }
});

The issue is that this doesn't maintain the format of my string. Calling the controller action shows that it's correctly formatted JSON, but once it comes out of my Ajax request, it's not. Here it is directly from the controller:

["HDQ","HDQ","EVA","HDQ","HDQ","HDQ","EVA","SVF","SVF","SVF","SVF","DFC","DCF","Feedlot","DCF","DCF","DCC","AGNW","AGNW"]

Is there any way that I can ensure that this is the value set to the variable before I pass it along to my plugin?

The plugin I'm using is called ImageMapster. Currently, I have the JSON hard coded for it and it works as intended.

var data = $.parseJSON($('#map-data').text());
var cities = $.parseJSON($('#city-data').text());


$('img').mapster({
    mapKey: 'state',
    clickNavigate: true,
    isSelectable: false,
    highlight: false,
    onConfigured: function () {

        // make the array into a comma-sparated list
        var state_list = data.join(',');
        var city_list = cities.join(',');

        // the 'set' activates the areas
        $('img').mapster('set', true, state_list, options = { fillColor: '638EA5' });
        $('img').mapster('set', true, city_list, options = { fillColor: 'ffffff' });
    }
});

Can you show the JSON you used for the plugin? – Huy Hoang Pham May 12 '15 at 01:27 — Huy Hoang Pham, May 12 '15 at 01:27
The string I'm using for the plugin is in my question. – droo46 May 12 '15 at 15:02 — droo46, May 12 '15 at 15:02

hina10531 · Answer 1 · 2015-05-12T00:35:01.560

Is your statesHighlight just a simple System.String[] ? then you will get always the plain string array object in your javascript.

But you want something like var a = { data1 : "a", data2 : "b", data3 : "c" };

JSON basically consists of Key & Value. The equivalent of the data type in C# would be Dictionary. You need to pass Dictionary type or any other key&value object when you parse your data to Json.

public ActionResult Highlight()
{
    var statesHighlight =
        db.Jobs
            .Select(r => r.Location);
    // statesHighlight should be Dictionary 
    // if you want a JSON result having keys and values.
    return Json(statesHighlight , JsonRequestBehavior.AllowGet);
}

In case you need just a keyname for the string array, you can set up a keyname like this.

//return Json(statesHighlight , JsonRequestBehavior.AllowGet);
return Json(
    new {
        keyname = statesHighlight
    }
    , JsonRequestBehavior.AllowGet
);

The JSON I have hard coded for my plugin is in the same format that I can see when I directly navigate to the controller. The issue arises once I've made the Ajax request because it doesn't maintain that format. — droo46, May 12 '15 at 15:04

score 0 · Accepted Answer · answered May 13 '15 at 15:45

I was looking the wrong place entirely for an answer. The formatting was just fine; I discovered this when I took a closer look at the formatting of the variables I was originally using. As it turns out, I was making things more complicated than they needed to be. Bypassing one of my incremental steps ended up being the right solution. Here is my final code:

 //retrieve JSON strings from controller
var citydata = {};
$.ajax({
    async: false,
    url: '@Url.Action("Highlight", "Jobs1")',
    method: 'GET',
    success: function (data) {
        citydata = data;
    }
});

var statedata = {};
$.ajax({
    async: false,
    url: '@Url.Action("HighlightState", "Jobs1")',
    method: 'GET',
    success: function (data) {
        statedata = data;
    }
});

//imagemapster to generate map behaviors
$('img').mapster({
    mapKey: 'state',
    clickNavigate: true,
    isSelectable: false,
    highlight: false,
    onConfigured: function () {

        // make the array into a comma-sparated list
        var state_list = statedata.join(',');
        var city_list = citydata.join(',');

        // the 'set' activates the areas
        $('img').mapster('set', true, state_list, options = { fillColor: '638EA5' });
        $('img').mapster('set', true, city_list, options = { fillColor: 'ffffff' });
    }
});

Format JSON from controller for use by a plugin

2 Answers2