How to use json string after Serialization in view javascript?

Question

I want to serialize a JSON string but when I pass JSON to view I see that my properties in code are in string format, that's probably why my code didn't work. Serialization of my code in code behind:

var data = new ChartData
{
    labels = new ChartLabels
    {
        labels = new string[3] {"Open", "Close", "Nothing"}
    },
    datasets = new ChartDatasets
    {
        data = new int[3] {20, 10, 3},
        backgroundColor = new string[3] {"#ccf9d6", "#ccf9d6", "#ccf9d6"},
        borderWidth = 1
    }                
};
var json = new JavaScriptSerializer().Serialize(data);
ScriptManager.RegisterStartupScript(
    this, 
    GetType(),
    "ServerControlScript", 
    "addChart(" + json + ");", 
    false);

And I want to use it in my JavaScript function:

function addChart(data) {
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, data);

EDIT: Json looks like below:

{"labels":
    {
        "fontSize":0,
        "boxWidth":0,
        "labels":["Open","Close","Nothing"]},
        "datasets":{"label":null,"data":[20,10,3],
        "backgroundColor":["#ccf9d6","#ccf9d6","#ccf9d6"],
        "borderWidth":1 
    }
}

Is there any way to convert it to correct format? Or just put it to a JavaScript variable?

This might achieve what you want: `"addChart(JSON.parse(" + json + "));",` — peinearydevelopment, Sep 20 '17 at 12:58
@peinearydevelopment You could explain why this is needed and post it as an answer. — Anderson Pimentel, Sep 20 '17 at 13:05
This is a view in MVC? Its a bit unclear what we are looking at. — Carter, Sep 20 '17 at 13:21
Possible duplicate of [Safely turning a JSON string into an object](https://stackoverflow.com/questions/45015/safely-turning-a-json-string-into-an-object) — War10ck, Sep 20 '17 at 14:01

score 0 · Answer 1 · answered Sep 20 '17 at 13:50

As stated on MDN,

The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string.

Seeing as the addChart javascript method call is being executed, but is getting a string instead of the expected JSON object, that string has to be parsed.

Without knowing the broader context of the application it is hard to give a great answer as there are a few ways you could accomplish your goal. The simplest though would be to change the line "addChart(" + json + ");", to "addChart(JSON.parse(" + json + "));", so that when the application executes this javascript, the json string will be parsed by the javascript engine and made into a javascript object the addChart method is expecting.

Carter · Answer 2 · 2017-09-20T14:04:00.680

I am not hip to the ScriptManager and I kind of like things to appear as I expect when I do my debugging in Chrome so this is how I would attack it using an asp:Literal on the page.

ASP Page:

<script src="assets/js/bootstrap.js" type="text/javascript">
</script>
<asp:Literal runat="server" ID="aspchartdata"></asp:Literal>

Code Behind:

var data = new ChartData
{
    labels = new ChartLabels
    {
        labels = new string[3] {"Open", "Close", "Nothing"}
    },
    datasets = new ChartDatasets
    {
        data = new int[3] {20, 10, 3},
        backgroundColor = new string[3] {"#ccf9d6", "#ccf9d6", "#ccf9d6"},
        borderWidth = 1
    }                
};

    aspchartdata.Text = "<script> var data=" + JsonConvert.SerializeObject(data); + "</script>";

Now you have a data variable in Javascript to use.

On the server side your literal is replaced by your new script to define the variable and now you can handle the onload running and such from within the ASPX page in a neat fashion.

How to use json string after Serialization in view javascript?

2 Answers2

ASP Page:

Code Behind: