Breaking line array jQuery

Question

I am collecting the values selected by the user and playing in an array. After that, I created a loop to play these values in a string to print on the screen. The problem is that they’re all coming in one line with only one space between them. Follow code from the loop:

var descr = "";
for (var i = 0; i < nomes.length; i++) {
    descr = descr + "\n" + nomes[i] + ": " + qtd[i];
}
descr = descr + "\n";
$("#itens").text(descr);

Answer 1

rather than concatenate \n Voce must concatenate <br/> once the contents Voce is printing eh HTML.

You must also call instead the method .text(descr) call the method .html(descr)

var nomes = ['nome 1','nome 2','nome 3','nome 4','nome 5','nome 6'];
var qtd = ['1','2','3','4','5','6'];

var descr = "";
for (var i = 0; i < nomes.length; i++) {
    descr += "<br/>" + nomes[i] + ": " + qtd[i];
}
descr = descr + "<br/>";
$("#itens").html(descr);

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

<p id="itens"></p>

Answer 2

Three alternatives:

• as you have and putting together white-space: pre-wrap; in the CSS
• using <br> as separator and .html() in time of .text()
• using <p></p>

#1

var nomes = ['Joao', 'Maria'];
var qtd = [10, 45];
var descr = "";
for (var i = 0; i < nomes.length; i++) {
  descr = descr + "\n" + nomes[i] + ": " + qtd[i];
}
descr = descr + "\n";
$("#itens").text(descr);

#itens {
  white-space: pre-wrap;
}

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

#2

var nomes = ['Joao', 'Maria'];
var qtd = [10, 45];
var descr = "";
for (var i = 0; i < nomes.length; i++) {
  descr = descr + "<br>" + nomes[i] + ": " + qtd[i];
}
descr = descr + "<br>";
$("#itens").html(descr);

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

#3

var nomes = ['Joao', 'Maria'];
var qtd = [10, 45];
var descr = nomes.map(
  (nome, i) => ['<p>', nomes[i], ": ", qtd[i], '</p>'].join('')
);
$("#itens").html(descr);

#itens {
  white-space: pre-wrap;
}

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