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

How-to Discussions
1

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>
2

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.

3

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 \\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);
    });
    
})
4

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.