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).

Possible duplicate of [Line break in html with \`\n\`](https://stackoverflow.com/questions/39325414/line-break-in-html-with-n) — juzraai, Aug 08 '18 at 17:25
Possible duplicate of [How do I create a new line in Javascript?](https://stackoverflow.com/questions/5758161/how-do-i-create-a-new-line-in-javascript) — Heretic Monkey, Aug 08 '18 at 17:40

score 0 · Answer 1 · answered Aug 08 '18 at 17:31

0

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

or

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

answered Aug 08 '18 at 17:31

BaiLeiTao

21
6

it will return an Array[ ], if you are not using the `.join()` – Avinash Aug 08 '18 at 17:33

score 0 · Answer 2 · answered Aug 08 '18 at 17:37

0

You must use br/ in Html for line break.

answered Aug 08 '18 at 17:37

ArunRaheja

9
1

score 0 · Answer 3 · answered Aug 08 '18 at 17:37

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>

score 0 · Answer 4 · answered Aug 08 '18 at 17:39

0

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>

answered Aug 08 '18 at 17:39

Saeed

5,413
3
26
40

How can I avoid using jQuery? – emka26 Aug 08 '18 at 18:05
Are you using AngularJS? @emka26 – Saeed Aug 08 '18 at 18:08
Yes, and I want to pass $scope.displayString to html (for tooltip) – emka26 Aug 08 '18 at 18:10
Did you try `angular.element('#showHere').html(text)` instead? @emka26 – Saeed Aug 08 '18 at 18:11
But I need pass it for tooltip like this: . – emka26 Aug 08 '18 at 18:16
tooltip is a directive? Create a working example on codepen. @emka26 – Saeed Aug 08 '18 at 18:18
Yes, tooltip is a directive. Can't create codepen, because it's a part of huge project and it's many dependecies. But fact is that I must pass string of characters to directive in html and I want to have it with line break. – emka26 Aug 08 '18 at 18:29
Maybe using ` ` according to [this](https://stackoverflow.com/questions/3340802/add-line-break-within-tooltips) helps. I can not figure out how that directive works, so I can't help more. @emka26 – Saeed Aug 08 '18 at 18:32

Display string with line break

4 Answers4