Ir ao conteúdo

Posts recomendados

Postado

O desafio é criar um programa automatizado que entre na pagina: https://developer.athenas.online/table.html capture os dados da tabela e retorne um json.

Meu professor pediu para realizar esse desafio, mas não sei como fazer, alguém????

Postado

Eu adoro esses desafios, mas não vou te dar a solução completa...

 

Essa página apesar dela retornar uma tabela, a tabela vem como HTML e não como JSON, porém essencialmente HTML não é muito diferente de XML, então vem a pergunta como eu faria para converter um "HTML" em JSON?


Para obter o HTML você pode usar o fetch e obter os dados do response usando o Body.text()... Caso você tem dificuldades de entender o fetch com Body.text() esse link pode te ajudar a entender: https://stackoverflow.com/a/52523232/15405395

 

EVITA VER MEU CÓDIGO! AQUI ESTÁ A RESPOSTA, MAS ISSO VAI FAZER PERDER A GRAÇA DO DESAFIO!

  Mostrar conteúdo oculto

 

 

Certo, agora que você tem em mãos uma String HTML, então a primeira coisa que a gente precisa fazer é converter essa "HTML String" em "HTML", para isso você vai usar o DOMParser(), para ser mais especifico, você vai usar DOMParser.parseFromString():

 

EVITA VER MEU CÓDIGO! AQUI ESTÁ A RESPOSTA, MAS ISSO VAI FAZER PERDER A GRAÇA DO DESAFIO!

OS LINKS QUE EU DEIXEI EXPLICAM COMO TRABLAHAR COM O DOMPARSER().

  Mostrar conteúdo oculto

 

Agora sim! Nesse ponto você está fazendo uma request na tabela e convertendo ele para HTML... então agora vamos converter de HTML para JSON!

ESSA É A PARTE MAIS "LEGAL/difícil" DO DESAFIO! porque? porque o JavaScript não tem uma função nativa que converta HTML para JSON, então o que fazer?

 

Vamos primeiro analisar a tabela, ela tem as seguintes informações: Codigo, Nome, E-mail e Categoria

 

Antes de ver minha estrutura/código, tente montar seu JSON usando apenas as informações da tabela.

  Mostrar conteúdo oculto

 

Agora que temos nossa estrutura, precisamos fazer um "loop" para pegar os valores de dentro da tabela, e salvar eles dentro do nosso JSON... Temos duas principais formas de fazer um loop e pegar os valores: "map" e a "forEach", nesse nosso caso vamos usar o forEach.

 

Mas não podemos simplesmente rodar todo o HTML dentro do forEach, isso seria problematico. Então como vamos fazer? Vamos usar o Document.querySelectorAll() e Selecionar todos os tr, feito isso vamos ter uma Array de 15 valores e vamos conseguir rodar essa array dentro do forEach.

 

TENTE FAZER ANTES DE VER MEU CÓDIGO:

  Mostrar conteúdo oculto

 

 

Certo, e agora? Agora vamos pegar o valor que o forEach entrega pra gente(eu salvei eles dentro de props) e vamos usar novamente Document.querySelectorAll() PORÉM vamos selecionar todos os td. :D

 

TENTE FAZER ANTES DE VER MEU CÓDIGO:

  Mostrar conteúdo oculto

 

Agora está quase tudo pronto! O segundo querySelectorALl já está entregando os valores dentro de uma array com 4 indexes, agora vamos colocar os valores dentro do nosso JSON:

 

ESSE É O CÓDIGO FINAL:

  Mostrar conteúdo oculto

 

 

Vale lembrar que esse código não é dinamica, caso a tabela sofra a adição ou a remoção de sua estrutura, o JSON gerado vai ter alguns problemas em sua estrutura. :)

 

Aqui está o código funcionando:

  Mostrar conteúdo oculto

 

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Mostrar mais  

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mostrar mais  
×
×
  • Criar novo...

LANÇAMENTO!

eletronica2025-popup.jpg


CLIQUE AQUI E BAIXE AGORA MESMO!