Javascript not recognizing new line

Viewed 239

I am posting some details into my Nodejs backend using ajax request and creating a string with multiple lines. To do this I am doing something like:

 changeString = req.body.Change1 + '\n'
 changeString = changeString + req.body.Change2 + '\n'
 changeString = changeString + req.boyd.Change3 + '\n'
 ....

After this I am inserting this field to my database. This is working perfectly fine and I can go in the database and copy the field value into a notepad and see the line changes:

sdsdsds
sdsdsds
asdasdsadasdasdas

In another page of my website I am pulling the details from the same field and adding it to a table but instead of new lines I am getting

sdsdsds sdsdsds asdasdsadasdasdas

To add to my table I am doing

`<tr>        
     <td>${item.Name}</td>
     <td>${item.Time}</td>
     <td>${item.Description}</td>
 </tr>`

If I console.log the item description I can see the line changes

The line changes somehow disappear when I add in the HTML.

2 Answers

Perhaps try to CSS mark the element that contains line break characters with

white-space: pre-line

or with

white-space: pre-wrap;

For example like this:

<span style="white-space: pre-line">${item_here}</span>

HTML parser will ignore whitespace characters (including \n newline) in the source code, so you can use <br/> tag to create a newline or render your strings inside a <pre> /*sometex*/ </pre>.

Related