Javascript Programa Automatizado em JSON

[Franciely Santos Mota]

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????

[Rui Guilherme]

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.

 

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