up vote 1 down vote favorite

I have the following class in C#:

public class Caption
{
    public string line;
    public string timestamp;
}

I have created some Caption objects and added them to a List:

List<Caption> CaptionList = new List<Caption>();
var obj = new Caption
{
  line = "Some text"
  timestamp = "00:10"
};
CaptionList.Add(obj);

I then use Json.NET to serialize the list to Json, like this:

public string json = JsonConvert.SerializeObject(CaptionList);

Now I want to use this as a JavaScript array, so I tried this:

var arr = '<%=json%>';

I don't have much JavaScript knowledge, but it seems like arr is now a string and not an array because json is in fact a C# string. I tried accessing the objects by using arr[i].line etc, but that doesn't work.

How do I make the jsonan actually array in JavaScript?

share|improve this question
2  
Just remove single quotes (') around JSON output: var arr = <%=json%>; – hindmost Mar 23 '15 at 12:22
1  
Doing that gives me a syntax error though? – Boxiom Mar 23 '15 at 12:25
2  
First parse the json to make an object by using var JObject = JSON.parse(arr); – Unknown User Mar 23 '15 at 12:27
    
@Boxiom Most likely that's mean your json is invalid – hindmost Mar 23 '15 at 12:31
    
This should help you : sitepoint.com/convert-json-string-array – Vinod Mar 23 '15 at 12:31
up vote 3 down vote accepted

You can use the JSON.parse method to parse the JSON string into an array:

var arr = JSON.parse('<%=json%>');

However, as JSON is a subset of JavaScript syntax, you can actually use the JSON as a JavaScript array literal:

var arr = <%=json%>;
share|improve this answer
up vote 2 down vote

Take it as demo

Your variable arr will be rendered like this. This will be string. so to convert a string into JSON Object you need to parse that string. by using JSON.parse(arr)

var arr = '[ { "line":"Some text", "timestamp":"00:10" }, { "line":"Some text", "timestamp":"00:10" } ]';

var JObject= JSON.parse(arr);

Now you can access JObject[0].line

This will give you

"Some text"

You can take a look Here at Mozilla

share|improve this answer
up vote 2 down vote

We use MVC and in our views (which pass up models) we use a simple line whenever we want to convert the model into a javascript object:

<script type="text/javascript">
        $(document).ready(function () {
            MyObject.Initialize(@Html.Raw(Json.Encode(Model)));
        });
</script>

The key to all of that being:

@Html.Raw(Json.Encode(Model))

"Model" is what MVC passes up but you could very easily do something like this: (Razor syntax)

@{
   List<Caption> CaptionList = new List<Caption>();
   var obj = new Caption
   {
     line = "Some text"
     timestamp = "00:10"
   };
   CaptionList.Add(obj);
}

then...

<script type="text/javascript">
        $(document).ready(function () {
            MyObject.Initialize(@Html.Raw(Json.Encode(CaptionList)));
        });
</script>

I haven't tested this but it should work, or some variation of it, you may need to put "CaptionList" as a property in some parent object and pass that into Json.Encode.

You could do this instead, as well:

<script type="text/javascript">
        $(document).ready(function () {
            var myArray = @Html.Raw(Json.Encode(CaptionList)));
        });
</script>

Note that jQuery isn't necessary here, it was just a way to wrap it up in the ready function.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.