Porque criar a TR? | Fetch API: Consumindo uma API Rest com JavaScript

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Estudante

| 247.7k xp | 136 posts

Olá,

por volta dos 2 minutos , o código estava dentro de template strings assim:

const conteudoLinha = `<tr>
                                <td>${informacoesCliente[0].cpf}</td>
                                <td>${informacoesCliente[0].nome}</td>
                        </tr>`;

Esse conteúdo seria inserido no html via "innerHTML" no tbody. Porém o instrutor optou por retirar o elemento

, e criar uma

com o document.createElement('tr'), inserindo as tds na tr com o innerHTML e só depois inseri-las no tbody.

Porque ele fez isso? O código funcionaria com a tr no template strings também. Há algum problema de ordem assíncrona, quando usamos todo o código dentro das template strings? Ao fazer requisiões ajax, é uma boa prática criar uma tag 'root' via DOM (document.createElement), ao invés de inserir tudo como string?

Desde já obrigado!

3 respostas

solução!

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

16/03/2020

Fala ai Renato, tudo bem? Vamos lá:

Porque ele fez isso?

Isso vai muito de gosto, ele preferiu fazer com o document.createElement('tr')para depois fazer o appendChild no corpo da tabela.

O código funcionaria com a tr no template strings também

Sim e não, precisaria ajustar algumas coisas, por exemplo o uso do appendChild não seria possível com string.

Há algum problema de ordem assíncrona, quando usamos todo o código dentro das template strings?

Não, não há problema nenhum em relação à isso.

Ao fazer requisiões ajax, é uma boa prática criar uma tag 'root' via DOM (document.createElement), ao invés de inserir tudo como string?

Não é questão de boa prática ou não, o método que ele fez com o createElement é uma abordagem mais antiga.

Atualmente podemos usar template string com map e join, obteríamos o mesmo resultado.

Não existe certo ou errado, vai do gosto de cada um.

Espero ter ajudado.

por Estudante

| 247.7k xp | 136 posts

16/03/2020

Obrigado Matheus! Em outros cursos eles usam muito o map e join. Pensei que talvez só funcionasse em frameworks que tratavam os erros dessa abordagem.

Valeu!

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

17/03/2020

Magina Renato, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.