1

Boa tarde.

Estou tentando criar alguns elementos dinâmicamente vindos de uma API, só que estou rodando o map pra isso, o problema é que junto dele, aparecem virgulas no meio das li's que não imagino de onde são. Como posso contornar isso?

Vou simular o response da API abaixo:

function personalInstaThumb() {
	const personalInstaThumb = document.querySelector('#personalInstaThumb')
	const response = [
        {
			images: {
				url: 'https://www.blogsenacsp.com.br/wp-content/uploads/2018/10/GettyImages-932559358.jpg'
			}
		},
        {
			images: {
				url: 'https://www.blogsenacsp.com.br/wp-content/uploads/2018/10/GettyImages-932559358.jpg'
			}
		},
        {
			images: {
				url: 'https://www.blogsenacsp.com.br/wp-content/uploads/2018/10/GettyImages-932559358.jpg'
			}
		}
	]
	personalInstaThumb.innerHTML = `<ul>${response.map((img, indice) => `<li class="insta_thumb_item_${indice}"><img src=${img.images.url} width="150" height="150" /></li>`)}</ul>`
}
personalInstaThumb()
li {
  list-style: none;
}
<div id="personalInstaThumb"></div>

Podem ver que depois de cada li, aparece uma vírgula. Por que e como posso "consertar" isso?

1 Resposta 1

3

Lucas, utilize .join('') para unir o resultado do seu map, o parâmetro fornecido para o join é o separador.

personalInstaThumb.innerHTML = `<ul>${response.map((img, indice) => `<li class="insta_thumb_item_${indice}"><img src=${img.images.url} width="150" height="150" /></li>`).join('')}</ul>`
2
  • Que massa cara, tinha me esquecido do join. Mas você sabe me dizer de onde vem a vírgula? Commented 7/10/2019 às 16:30
  • 3
    @LucasdeCarvalho map retorna um array, e quando um array é transformado em string, os elementos são mostrados assim, com uma vírgula separando-os: jsfiddle.net/4abkpjus
    – hkotsubo
    Commented 7/10/2019 às 16:37

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 .