Skip to main content
conteúdo editado
Fonte Link
Lucas de Carvalho
  • 6,7mil
  • 11
  • 46
  • 104

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 "concertar""consertar" isso?

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 "concertar" isso?

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?

Fonte Link
Lucas de Carvalho
  • 6,7mil
  • 11
  • 46
  • 104

Remover vírgula do map

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 "concertar" isso?