Display string with line break

Question

I need to display string with line break.

I have object:

"test": {
    "test1": 5,
    "test2": 6
 }

Now I need display something like this:

test1 - 5
test2 - 6

So I use:

$scope.displayString = _.keys(test).map(function(key) {
    return (key + '-' + test[key])
}).join('\n')

But on view I have still string in one line, like:

test1 - 5 test2 - 6

It looks like I replace comma for one space, but I would like to have line break. How can I solve it? Thanks for any tip!

I don't want to use jQuery, I want pass $scope.displayString to my html (for tooltip).

Answer 1

$scope.displayString = _.keys(test).map(function(key) {
   return (key + '-' + test[key] + '\n')
})

or

$scope.displayString = _.keys(test).map(key => key + '-' + test[key] + '\n')

Answer 2

您必须在HTML中使用br /来换行。

Answer 3

You will need to add <br> instead of \\n if displaying to html

 $("#id1").html("test 1 "+"<br>"+" test 2"); $("#id2").html("test 1 "+"\\n"+" test 2"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="id1"></div> <hr> <div id="id2"></div> 

Answer 4

Use join("<br />") instead of join("\\n") and also use html() function.

 let object = { "test": { "test1": 5, "test2": 6 } }, text = Object.keys(object.test).map(function(key) { return (key + '-' + object.test[key]) }).join("<br />"); $('#showHere').html(text) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id='showHere'> </p>