JSON from Newtonsoft to JavaScript

Question

So, I have a some json data which I create in my controller like so:

Notes = JsonConvert.SerializeObject(contact.Notes.OrderBy(x => x.DateLogged).Select(x => new 
            {
                id = x.Id,
                date = x.DateLogged,
                content = x.Content,
                logged = x.Username
            }))

This then gets passed to the view, now which statment can I do to achieve the results of having a variable contain that json data:

var data = '@Html.Raw(Model.Notes)'

or

var data = JSON.parse('@Html.Raw(Model.Notes)');

EDIT

the content variable holds some "\n" which when passed to the view using the first choice from above generates an error, saying

Unexpected Token

it only does it with \n so what is going wrong here? the bottom method doesn't quite work.

I always do @Html.Raw(JsonConvert.SerializeObject(Model.Notes)) in the View and send an object from the controller — PMC
– PMC, Commented Dec 18, 2013 at 20:33
it seems the javascript JSON library doesn't like \n, if i got with the top method with no parse then it works fine — Callum Linington
– Callum Linington, Commented Dec 18, 2013 at 20:34
No, the generated source probably ends up looking like var data = '...<newline>... and the Javascript parser itself is the one complaining about that newline. You need to escape it somehow. I assume @Html.Raw is meant to be put inside of HTML, not inside of a <script> tag. — MischaNix
– MischaNix, Commented Dec 18, 2013 at 20:35

bobince · Accepted Answer · 2013-12-18 21:33:19Z

var data = JSON.parse('@Html.Raw(Model.Notes)');

This doesn't work - you can't put a JSON literal inside a JavaScript string. Any backslash in it will be an escape character to the JavaScript parser, not the JSON parser. A newline comes out like:

var data = JSON.parse('{"content": "abc\ndef"}');

which means the string you are asking JSON to parse is:

{"content": "abc

def"}

which is not valid as you can't have a literal newline in a JSON string.

To do this with JSON.parse you would have to JS-string-literal encode the JSON output, so you would end up with "abc\\ndef". The alternative would be to include the JSON directly in the script block as var data = @Html.Raw(Model.Notes);, but there are problems with this to do with the differences between JS and JSON (primarily characters U+2028 and U+2029) and the enclosing HTML context (ie what the sequence </script does).

Getting the escaping right here is harder than it looks, so you should avoid injecting anything into a <script> block. Better to put in-page JSON data in a data- attribute and read it from the DOM; this way you can use the normal HTML escaping Razor gives you by default.

<div id="notes" data-notes="@Model.Notes">

...

var data = JSON.parse(document.getElementById('notes').getAttribute('data-notes'));

Callum Linington · Accepted Answer · 2013-12-19 10:48:09Z

0

bobince is obviously correct in what he says, it makes so much sense, thanks for that.

However, my solution was to simply do:

var data = @Html.Raw(Model.Notes);

Because, Newtonsoft already has converted it to a proper JSON format, so all it needs to do, is be assigned to a variable to be manipulated.

I think grabbing the content from a the HTML DOM is a bit too much for this.

answered Dec 19, 2013 at 10:48

Callum Linington

14.4k14 gold badges80 silver badges156 bronze badges

Collectives™ on Stack Overflow

JSON from Newtonsoft to JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related