查看JavaScript后如何在序列化后使用json字符串？

Question

我想序列化一個JSON字符串，但是當我通過JSON進行查看時，我看到我的代碼屬性為字符串格式，這可能就是為什么我的代碼無法正常工作的原因。 我的代碼在以下代碼中序列化：

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);

我想在我的JavaScript函數中使用它：

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

編輯：傑森看起來像下面：

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

有什么辦法可以將其轉換為正確的格式？ 或者只是將其放入JavaScript變量中？

Answer 1

如MDN所述 ，

JSON.parse（）方法解析一個JSON字符串，以構造該字符串描述的JavaScript值或對象。

好像正在執行addChart javascript方法調用，但是正在獲取字符串而不是預期的JSON對象，因此必須對該字符串進行解析。

在不了解應用程序更廣泛的上下文的情況下，很難給出一個很好的答案，因為有幾種方法可以實現目標。 不過，最簡單的方法是將行"addChart(" + json + ");",更改為"addChart(JSON.parse(" + json + "));",以便當應用程序執行此javascript時，json字符串將由javascript引擎解析，並成為addChart方法期望的javascript對象。

Answer 2

我對ScriptManager不熟悉，我喜歡在Chrome中進行調試時像預期的那樣出現，因此這就是我將使用頁面上的asp：Literal攻擊它的方式。

ASP頁：

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

背后的代碼：

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>";

現在，您可以在Javascript中使用一個數據變量。

在服務器端，您的文字被新腳本替換以定義變量，現在您可以在ASPX頁面中以簡潔的方式處理onload運行。