将JSON字符串/数组解析为JS对象

本文关键字:JS 对象 数组 JSON 字符串 | 更新日期: 2023-09-27 18:13:01

所以我已经使用JSON从c#序列化对象列表发送到JS。列表似乎到达浏览器,但我不知道如何正确使用它。这是有意义的,什么到达是一个字符串,但它似乎实际上是一个数组…我不确定,我不知道如何使用它。

这是我的JS

var data;
function testFunc() {
    d3.select("#stuff").append("h2").text(data[0].source);   
}

当我发送一个对象时,上面的JS正确地打印出值。这里是c#

protected void btnTest_Click(object sender, EventArgs e)
        {
            string json = JsonConvert.SerializeObject(new testClass(66,77));
            ClientScript.RegisterArrayDeclaration("data", json);
            ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "id", "testFunc()", true);
        }

当我查看浏览器的调试器时,当上面的代码执行时,我看到下面这行:

var data =  new Array({"target":66,"source":77});

这允许我在上面的JS中打印值77

令人讨厌的是,我想要发送一个完全相同对象的列表。所以我使用下面的c#

List<TestGraph.Models.testClass> L = new List<TestGraph.Models.testClass>()
private List<testClass> fill()
        {
            for (int i = 0; i < 10; i++)
            {
                L.Add(new testClass(i, i+1));
            }
            return L;
        }
        protected void btnTest_Click(object sender, EventArgs e)
        {
            fill();
            string json = JsonConvert.SerializeObject(L);
            ClientScript.RegisterArrayDeclaration("data", json);
            ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "id", "testFunc()", true);
        }

当我使用相同的JS时,它不会打印任何东西,但是列表正在进入JS,因为当我查看浏览器的调试器时,我看到下面:

var data =  new Array([{"target":0,"source":1},{"target":1,"source":2},{"target":2,"source":3},{"target":3,"source":4},{"target":4,"source":5},{"target":5,"source":6},{"target":6,"source":7},{"target":7,"source":8},{"target":8,"source":9},{"target":9,"source":10}]);

那么,既然数据列表在浏览器中,我如何使用它?

PS没有必要,但如果有人好奇,这里是我的testClass

public class testClass
    {
        public int target { get; set; }
        public int source { get; set; }
        public testClass(int t, int s)
        {
            target = t;
            source = s;
        }
        public testClass()
        {
        }
    }

编辑

对于那些建议我已经尝试使用JSON.parse(data)

我用的是:

var data;
var data2 = JSON.parse(data);
function testFunc() {
    d3.select("#stuff").append("h2").text(data2[1].source);
}

编辑

所以当我遍历c#时,这一行:

JsonConvert.SerializeObject(L);

将以下字符串放入json var中:

"[{'"target'":0,'"source'":1},{'"target'":1,'"source'":2},{'"target'":2,'"source'":3},{'"target'":3,'"source'":4},{'"target'":4,'"source'":5},{'"target'":5,'"source'":6},{'"target'":6,'"source'":7},{'"target'":7,'"source'":8},{'"target'":8,'"source'":9},{'"target'":9,'"source'":10}]"

那么理论上当我调用:

ClientScript.RegisterArrayDeclaration("data", json);

它应该把上面的字符串放到js的'data'变量中,但是当我对它发出警告时:

var data;
function testFunc() {
    alert(data);
}

出现的是

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

我还尝试了另一种方法在我的c#:

protected void btnTest_Click(object sender, EventArgs e)
        {
            fill();
            string json = JsonConvert.SerializeObject(L);
            Response.Write(string.Concat("<input id='data' type='hidden' value='", json, "' />"));
            ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "id", "testFunc()", true);
        }

需要对JS

进行以下更改
var field = document.getElementById('data');
var data = JSON.parse(field.value);
function testFunc() {
    alert(data);
}

当我尝试这个新方法时,我得到和以前一样的结果:

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

我对上面方法中的字段var进行了第二次测试,得到

[object HTMLInputElement]

将JSON字符串/数组解析为JS对象

直接使用JSON.parse()

例如:

    var parsed = JSON.parse('[{"target":0,"source":1},{"target":1,"source":2},{"target":2,"source":3},{"target":3,"source":4},{"target":4,"source":5},{"target":5,"source":6},{"target":6,"source":7},{"target":7,"source":8},{"target":8,"source":9},{"target":9,"source":10}]');
    console.log(parsed[1].target);