Parse JSON string/array into JS objects

Question

So I have used JSON to serialize a list of objects from C# to send to JS. The list seems to arrive at the browser but I can't figure out how to use it correctly. It makes sense that what arrives is a string however it seems to actually be an array... I'm not sure and I can't figure out how to use it.

Here is my JS

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

When I send a single object the above JS prints out the value properly. Here is that 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);
        }

When I look at the browser's debugger I see this line below when the above is executed:

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

This is what allows me to print the value 77 in the JS above

The annoying thing is that I want to send a list of this exact same object. So I use the following 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);
        }

When I use the same JS it won't print anything out however the list is getting to the JS because I see below when I look at the browser's debugger:

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

So, since the list of data is in the browser how do I use it?

PS Not really necessary but here is my testClass if anyone is curious

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()
        {

        }
    }

EDIT

For those suggesting I have tried using JSON.parse(data)

I used this:

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

EDIT

So when I step through the C# the line:

JsonConvert.SerializeObject(L);

puts the following string into the 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}]"

Then in theory when I call:

ClientScript.RegisterArrayDeclaration("data", json);

it should put the above string into the 'data' var in the js however when I do an alert on it as such:

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

What appears is

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

I also tried another method in my 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);
        }

Which required the following change to the JS

var field = document.getElementById('data');
var data = JSON.parse(field.value);
function testFunc() {
    alert(data);
}

When I try this new method I get the same as before:

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

And I did a second test on the field var from the method above and got

[object HTMLInputElement]

Answer 1

just use JSON.parse()

for example:

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