jquery + json - \n not working

Question

I recently found out about .json files and I am trying to put a multiline string inside a data value, but it is just simply not working. I've tried \n and \r and \n\r but none work when they get put into my div from jquery.

Am I missing something here? This is my json file:

{
    "lText": "space\nbreak",
}

And here is my javascript:

$.getJSON("/js/content.json", function (data) {
    $(".lander .title").text(data.lTitle);
    $(".lander .subtitle").text(data.lSubtitle);
    $(".lander .text").text(data.lText);
});

I know that, but putting a
tag inside the json file just renders the br tag in the document. — Sebastian Olsen, Jul 09 '15 at 02:13
Sorry, I assumed 1: "the document" referred to the web page document, and 2: you wanted `"space\nbreak"` to display as two lines in the document — Jaromanda X, Jul 09 '15 at 02:19
If you want help you should post some code to show what you are doing with this type of data now, that way your errors can be pointed out for you — Jaromanda X, Jul 09 '15 at 02:20
I edited my post trying to get more clear as I saw it getting downvotes. Sorry, should be easier to understand now. — Sebastian Olsen, Jul 09 '15 at 02:22
Whitespace is ignored by browsers. If you want newlines, you have to do it with HTML markup (or put the content in a `
` tag). — Pointy, Jul 09 '15 at 02:23

score 4 · Accepted Answer · edited Jan 01 '16 at 10:08

4

Pre-emptive answer

div.innerHTML = s.split('\n').join('<br />');

but if you insist on jQuery

$.getJSON("/js/content.json", function (data) {
    $(".lander .title").text(data.lTitle);
    $(".lander .subtitle").text(data.lSubtitle);
    $(".lander .text").html(data.lText.split('\n').join('<br />'));
});

edited Jan 01 '16 at 10:08

marc_s

732,580
175
1,330
1,459

answered Jul 09 '15 at 02:22

Jaromanda X

53,868
5
73
87

You can't use `.text()` to inject HTML content. You have to use `.html()`. – Pointy Jul 09 '15 at 02:26
@SebastianOlsen did you change that last line to use `.html()` as in the answer? If you use `.text()`, it won't work. – Pointy Jul 09 '15 at 02:27
I seem to have missed the '.html()' bit there, sorry. – Sebastian Olsen Jul 09 '15 at 02:29
FYI, if this is seriously what you were after, @SebastianOlsen, I've got 2 quick points. 1 - Just put the `
` in your JSON file to begin with. 2 - You are not trying to put a multiline string into a JSON file, you are trying to put HTML into a JSON file. Big difference - browsers will render HTML when added properly, but they will ignore whitespace for display. 3 - Make sure your usage of `
` as opposed to `
` is appropriate. The former is for XHTML where self-closing tags are allowed and required. It won't break something like HTML5 per se, but it's bad form and not 100% proper. – jimcavoli Jul 09 '15 at 02:39
@jimcavoli - have to disagree on your first point. Splitting on `\n` is trivial, and having the `raw` data could be useful for other purposes – Jaromanda X Jul 09 '15 at 02:41

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

You need to escape the "\" character for the newline like so:

{
    "lText": "space\\nbreak",
}

See https://stackoverflow.com/a/42073/1728884

edited May 23 '17 at 12:01

Community

1
1

answered Jul 09 '15 at 02:16

jimcavoli

854
9
22

This just displays the \n tag inside my div. – Sebastian Olsen Jul 09 '15 at 02:19
Could you provide some more code then about how you're dealing with this JSON then in the page? I have a sneaking suspicion it's not being parsed into an object correctly. – jimcavoli Jul 09 '15 at 02:22
The problem is that he's just setting `.text()` - newlines are just whitespace. – Pointy Jul 09 '15 at 02:22
@Pointy you can add an actual newline, as in a `\n` through `.text()` since it's well...text – jimcavoli Jul 09 '15 at 02:30
@jimcavoli yes you can, but the browser won't treat it as a line break unless the container has the right CSS rule – Pointy Jul 09 '15 at 04:20
@Pointy And what CSS rule is it that will render a newline as a visible line break in-browser? – jimcavoli Jul 09 '15 at 04:23
@jimcavoli I think `white-space: pre` would do it. I'd have to try it out to be sure. – Pointy Jul 09 '15 at 04:26

score 0 · Answer 3 · answered Jul 09 '15 at 02:28

0

Try using this

$.getJSON("/js/content.json", function (data) {
    $(".lander .title").html(data.lTitle);
    $(".lander .subtitle").html(data.lSubtitle);
    $(".lander .text").html(data.lText);
});

And change \n to <br/>

answered Jul 09 '15 at 02:28

Agung Santoso

83
1
8

jquery + json - \n not working

3 Answers3