Ir ao conteúdo
  • Cadastre-se

Javascript Programa Automatizado em JSON


Posts recomendados

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!

Spoiler

 







await fetch("https://developer.athenas.online/table.html").then((response) => {
    return response.text()
}).then((html) => {
    console.log(html)
}).catch((err) => {
   console.error(err)
})

 

 

 

 

 

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().

Spoiler






await fetch("https://developer.athenas.online/table.html").then((response) => {
    return response.text()
}).then((html) => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    console.log(doc);
}).catch((err) => {
   console.error(err)
})

 

 

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.

Spoiler






[
  {
    Codigo: '',
    Nome: '',
    Mail: '',
    Categoria: ''
  }
]

 

 

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:

Spoiler






await fetch("https://developer.athenas.online/table.html").then((response) => {
    return response.text()
}).then((html) => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
  
    const items = doc.querySelectorAll('tr');
    items.forEach((props) => {
      const valores = props.querySelectorAll('td')
      console.log(valores.innerHTML)
    })
}).catch((err) => {
   console.error(err)
})

 

 

 

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:

Spoiler






await fetch("https://developer.athenas.online/table.html").then((response) => {
    return response.text()
}).then((html) => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
  
    const items = doc.querySelectorAll('tr');
    items.forEach((props, key) => {
//       eu fiz esse "if" para ignorar o primeiro tr, porque o primeiro tr tem as informações da tabela.
      if (key === 0) return
            
      const valores = props.querySelectorAll('td')
    })
}).catch((err) => {
   console.error(err)
})

 

 

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:

Spoiler


const JSONTabela = []

await fetch("https://developer.athenas.online/table.html").then((response) => {
    return response.text()
}).then((html) => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
  
    const items = doc.querySelectorAll('tr');
    items.forEach((props, key) => {
//       eu fiz esse "if" para ignorar o primeiro tr, porque o primeiro tr tem as informações da tabela.
      if (key === 0) return
            
      const valores = props.querySelectorAll('td')
   	// USEI O TRIM() APENAS PARA LIMPAR O VALOR DE DENTRO DO td!  
      JSONTabela.push({
          Codigo: valores[0].innerHTML.trim(),
          Nome: valores[1].innerHTML.trim(),
          Mail: valores[2].innerHTML.trim(),
          Categoria: valores[3].innerHTML.trim()
        })
    })
}).catch((err) => {
   console.error(err)
})

console.log(JSONTabela)

 

 

 

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:

Spoiler

vhn8UpV.png

 

Link para o post
Compartilhar em outros sites

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

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

×
×
  • Criar novo...

minicurso-montagem-popup.jpg

MINICURSO GRÁTIS!

Como ganhar dinheiro montando computadores!

CLIQUE AQUI E INSCREVA-SE AGORA MESMO!