# Line breaks ("\\n") won't work with json fetched data

**URL:** <https://forums.fusetools.com/t/line-breaks-n-wont-work-with-json-fetched-data/3942>\
**Category:** How-to Discussions\
**Created:** [March 29, 2018, 1:15pm UTC](https://forums.fusetools.com/t/line-breaks-n-wont-work-with-json-fetched-data/3942 "2018-03-29T13:15:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [March 29, 2018, 1:15pm UTC](https://forums.fusetools.com/t/line-breaks-n-wont-work-with-json-fetched-data/3942/1 "2018-03-29T13:15:27Z")

</div>

I would like to add line breaks `\n` to `<Text>`. I noticed that `\n` will work fine if passed from Javascript, but it will not when data is fetched in JSON format from a remote server.

Please consider the following sample. The line breaks `\n` used in `data` and `lineBreak` are correctly displayed. The line break used in `fetchedData` which is obtained by fetching data via API is ignored despite `console.log` shows that there’s a `\n`.

```
<App>
    <JavaScript>        
        var Observable = require("FuseJS/Observable");
        var data = Observable();
        var fetchedData = Observable();
        var lineBreak = Observable("Hello\nWorld");

        var json = {
            "settings": [
                {
                    about: "Hello\nWorld"
                }
            ]
        };

        data.replaceAll(json.settings);

        fetch("http://www.mindteq.com/api/tsn.php?startup")
            .then(function(response) {
                if (response.ok) {
                    return response.json(); 
                } else {    
                    throw Error(response.status);
                }
            })
            .then(function(json) {
                fetchedData.replaceAll(json.settings);
                fetchedData.forEach(function(settings) {
                    console.log(settings.announce);
                });
            }).catch(function(error) {

            });

        module.exports = {
            data: data,
            fetchedData: fetchedData,
            lineBreak: lineBreak
        };

    </JavaScript>

    <StackPanel>
        <Text Value="{lineBreak}" Margin="0,0,0,20" />
        <Text Value="{data.about}" Margin="0,0,0,20" />
        <Text Value="{fetchedData.announce}" />
    </StackPanel>
</App>
```

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [March 30, 2018, 7:23am UTC](https://forums.fusetools.com/t/line-breaks-n-wont-work-with-json-fetched-data/3942/2 "2018-03-30T07:23:26Z")

</div>

I see you’ve transitioned to using a `|` as a workaround, so I can’t really test anything there.

Have you tried escaping the `\`, as in: instead of having just `\n` in the JSON data, have `\\n`? As far as I’ve read, that’s pretty much a JSON thing, nothing specific to Fuse.

---

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [March 30, 2018, 9:03am UTC](https://forums.fusetools.com/t/line-breaks-n-wont-work-with-json-fetched-data/3942/3 "2018-03-30T09:03:24Z")

</div>

Hi Uldis, thank you for replying.

Yes you are right. As all my tests did not worked I thought I could use`|` instead of `\n` in the JSON and then replace `|` back to `\n` via `.replace` in Javascript in Fuse as in Fuse the linebreak `\n` works fine, but neither this worked. Now I changed the JSON output back.

The [JSON outputs](http://www.mindteq.com/api/tsn.php?startup&debug) `\\n` (look for the key ‘announce’). Fuse console ouputs `\n` because the backslash, that has been automatically escaped by adding a second `\`, is removed when data is fetched by Fuse. But in this way `\n` is interpreted as a simple string. So I tried to replace `\\n` with `\n` via Javascript. Now console outputs a line break correctly but `<Text>` does not and keeps printing the `\n` (‘Hello\nworld’):

```
.then(function(json) {

    fetchedData.replaceAll(json.settings);

    fetchedData.forEach(function(settings) {
        console.log(settings.announce);
        a = settings.announce;
        settings.announce = a.replace("\\n", "\n");
        console.log(settings.announce);
    });
    
})
```

---

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [April 3, 2018, 1:23pm UTC](https://forums.fusetools.com/t/line-breaks-n-wont-work-with-json-fetched-data/3942/4 "2018-04-03T13:23:05Z")

</div>

SOLVED.

Of course the above code did not work! I applied `.replaceAll` before making the string manipulation! That said, convert the `json` object into array, do the string manipulation and then apply `.replaceAll`.

```
.then(function(json) {

    // convert the json object into array
    var items = [];
    for (var i in json.settings) {
        items.push(json.settings[i])
    }

    // get the value from the array and apply the string manipulation
    a = items[0].announce;
    items[0].announce = a.replace("\\n", "\n");

    // apply .replaceAll
    fetchedData.replaceAll(items);

})

```

`<Text>` will correctly apply line breaks when the string is fetched from a remote server.