I'm building an app using nodejs.

I created a form, and I'm working on back-end validation of user input. Basically, I have a var, "messages", and each time I encounter an input error, I append the error to messages.

var messages ="";
errors.forEach(function(msgObject) {
    console.log(msgObject.message);
    messages += msgObject.message + "\r\n";
})

(I'm also using indicative -- / -- for error validation. It returns an array errors)

I'm returning the errors to the user using connect-flash

req.flash("error", messages);

I'm using connect-flash

My problem is that connect-flash ignores newline characters. I.e, I get something like:

I would like each error message to be on a separate line. I can't seem to find a way to acplish that. Any ideas?

Here's a simpler version of the problem: Why does req.flash("errors", "hello \n goodbye") return

hello goodbye

instead of

hello
goodbye

I'm building an app using nodejs.

I created a form, and I'm working on back-end validation of user input. Basically, I have a var, "messages", and each time I encounter an input error, I append the error to messages.

var messages ="";
errors.forEach(function(msgObject) {
    console.log(msgObject.message);
    messages += msgObject.message + "\r\n";
})

(I'm also using indicative -- http://indicative.adonisjs./ -- for error validation. It returns an array errors)

I'm returning the errors to the user using connect-flash

req.flash("error", messages);

I'm using connect-flash https://www.npmjs./package/connect-flash

My problem is that connect-flash ignores newline characters. I.e, I get something like:

I would like each error message to be on a separate line. I can't seem to find a way to acplish that. Any ideas?

Here's a simpler version of the problem: Why does req.flash("errors", "hello \n goodbye") return

hello goodbye

instead of

hello
goodbye

• javascript
• node.js
• newline
• flash-message
• connect-flash

4 Answers 4

Few things missing from your original post that might help you solve your own problem.

1. What template language are you using to display the notifications? Is it escaping the newline?
2. Should you be using HTML instead? So <br /> instead of \n.
3. Why not use multiple req.flash in sequence to create an array of notifications?

3: See below

// Set a flash message by passing the key, followed by the value, to req.flash(). 
req.flash('info', 'Flash is back!')
req.flash('info', 'Another message!')

// Get an array of flash messages by passing the key to req.flash() 
res.render('index', { messages: req.flash('info') });

Since we have an array of messages, you can iterate over the messages array to show them individually:

{% for message in messages %}<li>{{ message }}</li>{% endfor %}

Actually even better..

EJS FILE:

    <div class="container">
      <% if(error && error.length > 0 ) { %>
        <div class="alert alert-danger">
            <% if(error.length === 1) { %>
               <strong> <%= error %> </strong>
            <% } else { %>
                <ul>
                    <% error.forEach(function(err) { %>
                        <li> <strong> <%= err %> </strong></li>
                    <% }) %>
                </ul>
            <% } %> 
        </div>
    <% } 
    if(success && success.length > 0) { %>
        <div class="alert alert-success">
              <strong> <%= success %> </strong>
        </div>
    <% } %>
</div>

.js FILE

var messages = [];
errors.forEach(function(msgObject) {
    messages.push(msgObject.message);
})
req.flash("error", messages)

You're right, I forgot about my ejs file, which answers my question.

I basically added HTML li instead of newline characters (to make a bulleted list of errors)

 errors.forEach(function(msgObject) {
    console.log(msgObject.message);
    messages += "<li>" + msgObject.message + "</li>";
})
if(messages != "") {
    messages = "<ul>" + messages + "</ul>"; 
}

then had this in my ejs file

<div class="container">
    <% if(error && error.length > 0) { %>
        <div class="alert alert-danger">
              <strong> <%- error %> </strong> 
        </div>
    <% } 
    if(success && success.length > 0) { %>
        <div class="alert alert-success">
              <strong> <%= success %> </strong>
        </div>
    <% } %>
</div>

I replaced <%= errors %> with <%- errors %>

It will work like this:

<% if (hasMessages()) { %><% messages().forEach(function(msg){ %>
<% if(msg.message.length > 1) { %>
    <div class="alert fade in alert-<%- msg.type %>" data-alert="alert">
        <a class="close" data-dismiss="alert">&times;</a>            
        <% msg.message.forEach(function(innerMsg){ %>
            <%- innerMsg %> <br>
        <% }) %>    
    </div>
<% } else { %>    
    <div class="alert fade in alert-<%- msg.type %>" data-alert="alert">
        <a class="close" data-dismiss="alert">&times;</a>
        <%- msg.message %>             
    </div>
    <% } %>