2

Podemos imaginar o seguinte array:

var arr = ["a", "b", "c", "d"];

Sei que posso usar o join(", ") para transformá-lo em uma string tipo: "a, b, c, d", porém eu gostaria de criar um elemento para cada item do array, que ficasse tipo: "<li>a</li> <li>b</li> <li>c</li> <li>d</li>", é possível fazer isso usando o join()?

Obs: Sei que também posso dar um loop e fazer isso usando outros métodos, eu só gostaria de reduzir código mesmo.

2 Respostas 2

3

Basta combinar o join com o map:

const result = arr.map(it => `<li>${it}</li>`).join(' ')

Veja funcionando:

const arr = ["a", "b", "c", "d"]

const result = arr.map(it => `<li>${it}</li>`).join(' ')

console.log(result)

Ou com o reduce:

const arr = ["a", "b", "c", "d"]

const result = arr.reduce((res, it) => res + `<li>${it}</li>`, '')

console.log(result)

3
  • Precisa realmente do map? Commented 26/07/2018 às 16:11
  • @WallaceMaxters não é bem uma questão de necessidade - neste exemplo, mas fica mais simples por você trabalhar com o elemento separado. O que você fizer no map será refletido em todos. Pense que agora você precise colocar um <a> dentro do <li>.
    – Woss
    Commented 26/07/2018 às 16:14
  • Você tem razão. E dependendo da situação, eu apelaria até para um document.createElement para ficar mais elegante :p Commented 26/07/2018 às 16:17
3

Assim?

var arr = [1, 2, 3, 4, 5];

var html = "<li>" + arr.join("</li><li>") + "</li>";

console.log(html)

A ideia é você usar o </li><li> como o objeto de concatenação.

O arr.join('</li><li>') vai gerar isso:

 "1</li><li>2</li><li>3"

Sendo assim, basta adicionar <li> no início e </li> no final dessa string gerada pelo join.

Além do exemplo acima, daria para fazer algo mais elaborado, com document.createElement, para criar os li já dentro de uma ul, por exemplo:

var arr = [1, 2, 3, 4, 5];


var ul = document.createElement('ul');

arr.forEach(function (value) {

     var li = document.createElement('li');
     
     li.innerText = value;
     
     ul.append(li);
})



console.log(ul.outerHTML);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .