How to use a line break in JSON

javascript html css json

46,958

Solution 1

I solved this issue by breaking the JSON line into two separate lines, and in the HTML file adding in the second call with a   in between the two. I would still love to know if there is a simple command that would do this in JSON, like   or \n but neither of those work for me.

JSON:

    "footer": {
    "call_us": "Phone: {phone_number}",
    "localc": "Local: 012-345-6789"
}

HTML:

{{#if settings.phone_number}}
                <strong>{{lang 'footer.call_us' phone_number=settings.phone_number}}</strong>
                <br><strong>{{lang 'footer.localc'}}</strong>
            {{/if}}

Solution 2

It's that simple. I've been trying to figure this out too for a mastodon bot using tracery.

If you use \r you'll get a carriage return.

Solution 3

If you're outputting your call_us with PHP you can use PHP's nl2br() function: http://php.net/manual/de/function.nl2br.php

If you're outputting it with JS, you can use yourvar.replace("\n", " ")

otherwise use   instead of \n in your JSON.

Solution 4

You should convert the \n into an HTML break:  . You can do this with the String replace method.

View more solutions

46,958

Author by

Jake P

Updated on December 22, 2020

Comments

Jake P over 3 years

I have the text on my website appear from a .json file, and I want to have the line appear as:

Phone: 123-456-7890

Local: 012-35-6789

Instead I am getting:

Phone: 123-456-7890 Local: 012-35-6789

My code:

footer{
   "call_us": "Phone: {phone_number} \n Local: 012-345-6789"
}

Is there something besides \n I should be using?

Edit:

I am calling the JSON text to be displayed using the following code. I believe this is using Handlebars

{{#if settings.phone_number}}
                <strong>{{lang 'footer.call_us' phone_number=settings.phone_number}}</strong>
            {{/if}}

Full Code:

<article class="footer-info-col footer-info-col--small" data-section-type="storeInfo">
            <h5 class="footer-info-heading">{{lang 'footer.info'}}</h5>
            <address>{{nl2br settings.address}}</address>
            <script> var footer={
                "call_us": "Phone: {phone_number} \n Local: 012-345-6789"
            }
            for (var key in footer) {
                if (footer.hasOwnProperty(key)) {
                    console.log(footer[key]);
                }
            }</script>
            <!--{{#if settings.phone_number}}
                <strong>{{lang 'footer.call_us' phone_number=settings.phone_number}}</strong>-->
            {{/if}}
        </article>

Phiter almost 7 years

You could replace all ocurrences of \n to a   tag when outputting to html or simply store as   instead of \n. I don't know if the second option is good.
Jake P almost 7 years

@Phiter Is   meant to work in json? Others have suggested that, but that only displays as text for me. Am I doing something wrong if I just replace \n with  ?
Phiter almost 7 years

 is not json related, it's just html. And you can have html in your json values

Jake P almost 7 years

I am outputting with javascript, although using   does not work, instead it is displaying that as text. When I use \n it does not appear as text, but it does not separate the lines.
Jake P almost 7 years

This is how it is called in JS: {{#if settings.phone_number}} {{lang 'footer.call_us' phone_number=settings.phone_number}} {{/if}}
Jake P almost 7 years

How would I implement this? Replace the place where the text is called with what you provided or replace the text in the json file?
Jake P almost 7 years

This does not work. That just displays   as text.
Osama almost 7 years

Ok when you create you json object on the page instead of printing it directly use this function to print it
Jake P almost 7 years

I am not having any luck with that, although it seems like it should work. I replaced the line where I was calling in the json code with what you provided, and surrounded that with <script> tags as it is an HTML document.
Jake P almost 7 years

See the edit to my original post. That has the entire relevant area of the code. Is there really no symbol in JSON that performs the same function as   does in HTML? It seems like a line break should be simple.
Osama almost 7 years

add double quetos arrond local
Oancea Stefan over 4 years

replace with not