0

I've been reading Angular Tutorial. In the phones.json file the first object is as:

{
        "age": 0, 
        "id": "motorola-xoom-with-wi-fi", 
        "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", 
        "name": "Motorola XOOM\u2122 with Wi-Fi", 
        "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
    }

In the snippet property there are two newlines. So I expect the output to be printed with two newlines after the text The Next, Next Generation. But insted of two newlines there are two whitespaces shown. You can see the output here: http://angular.github.io/angular-phonecat/step-8/app/

  • Why aren't newlines printed in the output?

  • If the newlines cannot print in html then what is the purpose of /r/n in the json data?

P.S: I have no clue how my question is duplicate of the linked one.

Community
  • 1
  • 1
user31782
  • 7,087
  • 14
  • 68
  • 143
  • 1
    `\r\n` have no special meaning in HTML. If you want a line break, you have to use `
    `, `
    ` or CSS (see duplicate).
     – str Jul 18 '16 at 07:41
  • I can see it is working [JSIDDLE](https://jsfiddle.net/jmk01pd9/) – brk Jul 18 '16 at 07:41
  • @user2181397 That is exactly what I am asking. In jsfiddle it works as supposed but in Angular app it contains white space in place of newlines. – user31782 Jul 18 '16 at 07:43
  • 1
    @user31782 Fiddle uses `
    `, the tutorial does not.
     – str Jul 18 '16 at 07:44
  • @str What happens to these escape characters when we do not use `
    `? The Unicode character `\u2122` is printed in html then why are newlines not printed?
     – user31782 Jul 18 '16 at 07:51
  • They are ignored. When you structure sour HTML, you can add white spaces and new lines however you want. But they should not and will not be shown in the browser. – str Jul 18 '16 at 08:02
  • @str Then why does Angular Tutorial use that in their json data? – user31782 Jul 18 '16 at 10:26
  • 1
    @user31782 — Because it isn't a very good tutorial? It's not the worst thing about Angular I've encountered. – Quentin Jul 18 '16 at 10:32
  • To figure out whether `snippet` is supposed to be HTML in the first place, just prepend values with ``. If everything's underlined then it's handled as HTML (and should use proper tags). If you see a literal `` then it's handled as plain text. If the tag disappears then the tutorial is completely broken :) – Álvaro González Jul 18 '16 at 10:37
  • @ÁlvaroGonzález I see literal `` tags. But If it is supposed to be plain text then why don't I see the `\u2122` instead of the translated `TM` character? – user31782 Jul 18 '16 at 10:42
  • Because `\u2122` is the **JSON** encoding for U+2122 (aka `™`) and gets decoded automatically with the rest of JSON data. It has nothing to do with HTML. – Álvaro González Jul 18 '16 at 11:07
  • @ÁlvaroGonzález Is JSON encoding same as javascript encoding? Because `alert("\u2122");` in the console pops up `TM`. – user31782 Jul 18 '16 at 11:28
  • Not sure I still follow you... What else would you expect? The alert doesn't print the quotes either—it's just how JavaScript syntax for string literals work. – Álvaro González Jul 18 '16 at 11:40
  • @ÁlvaroGonzález I meant to say that it isn't JSON encoding. JSON passes it simply as text. It is the _javascript_ which converts `\u2122` into `TM`. – user31782 Jul 18 '16 at 11:56
  • Don't fall into the widespread misconception that, since JSON is based in JavaScript syntax, it must be the same thing. JavaScript is also based in English and it doesn't mean anything. – Álvaro González Jul 18 '16 at 11:59
  • @ÁlvaroGonzález Do both json and javascript use same encoding for characters? – user31782 Jul 18 '16 at 12:03
  • As far as I know, JSON doesn't support [`\u{X} ... \u{XXXXXX}` ES6 entities](http://www.2ality.com/2015/01/es6-strings.html) so the answer to your question is "no". – Álvaro González Jul 18 '16 at 12:14

0 Answers0