How do I get connect-flash to return multiple messages, or a single message with newline characters?

Question

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.com/ -- 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.com/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 accomplish 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

Avan

Answer 1

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)

Avan

Answer 2

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 %}

Daughter

Answer 3

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

Avan

Glad I could help, accept my answer if you so feel inclined, best of luck in your application! :) – Daughter

Answer 4

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>
    <% } %>

Clayson

Some explanation of the code helps... can you include ? – Weighin