Estou fazendo um requisição HTTP e de retorno recebo um Json! Então eu quero pegar esse valor de Json e atribuir a outra variável para poder modificá-la e depois exibir as duas lado a lado para comparar. Então me deparei com 2 problemas o primeiro é que não estou conseguindo atribuir o valor **httpRequest.responseText **a uma variável, já tentei a função **eval()** e a **toString() **e quando eu peço para printar com um alert() para verificar me retorna **undefined** o segundo problema é que eu estava exibindo o resultado na dom por meio de **appendChild()**, estou exibindo apenas com os valores originais para teste, mas quando ele executa esse trexo do code, ele printa na dom e logo em seguida retira da dom, tipo uma piscadinha rápida. Ficaria grato se me ajudassem a resolver esse problema. o Json que ele recebe de uma pagina.html é esse: {"numero_casas":9,"token":"68c56aa784fe216ae92720b76386ea0995055074","cifrado":"fqnw rw mxdkc, unjen rc xdc. sxbqdj kuxlq","decifrado":"","resumo_criptografico":""} o Script esta assim: var httpRequest ``` function request(){ var url = 'test.html'//apagar depois if (window.XMLHttpRequest) { // Mozilla, Safari,... httpRequest = new XMLHttpRequest() } else if (window.ActiveXObject) { // IE try { httpRequest = new ActiveXObject("Msxml2.XMLHTTP") } catch (e) { try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP") } catch (e) {} } } if (!httpRequest) { alert('Giving up:( Cannot create an XMLHTTP instance') return false } httpRequest.onreadystatechange = alertContents httpRequest.open('GET', url, true) httpRequest.responseType = 'jason' httpRequest.send() httpRequest.onload = function(){ view(httpRequest) } } function alertContents() { if (httpRequest.readyState === 4) { if (httpRequest.status === 200) { alert(httpRequest.responseText) } else { alert('There was a problem with the request.') } } } function view(httpRequest){ var resposta = httpRequest.responseText.toString() alert(resposta.value) var box = document.querySelector('div#decoding') box.setAttribute('class', 'shadow') var challenge = document.createElement('fieldset') challenge.setAttribute('class', 'painting') var legendChallenge = document.createElement('legend') legendChallenge.innerHTML = 'Challenge' challenge.innerHTML = `Número de casas: ${httpRequest.response.numero_casa}
Token: ${httpRequest.response.token}
Cifrado: ${httpRequest.response.cifrado}
Decifrado: ${httpRequest.response.decifrado}
Resumo Criptografico: ${httpRequest.response.resumo_criptografico}` var answer = document.createElement('fieldset') answer.setAttribute('class', 'painting') var legendAnswer = document.createElement('legend') legendAnswer.innerHTML = 'Answer' answer.innerHTML = `Número de casas: ${httpRequest.response.numero_casas}
Token: ${httpRequest.response.token}
Cifrado: ${httpRequest.response.cifrado}
Decifrado: ${httpRequest.response.decifrado}
Resumo Criptografico: ${httpRequest.response.resumo_criptografico}` box.appendChild(challenge) box.appendChild(answer) challenge.appendChild(legendChallenge) answer.appendChild(legendAnswer) } Index.html: ``` ``` Caesar cipher

Caesar cipher

e o style.css para dar sentido as class: ``` /*zerando margein e padding de todos os elementos*/ *{ ``` margin: 0. padding: 0. } ``` /*definido estilo padrão*/ body{ ``` font-family: 'Courier New', Courier, monospace. font-size: 16px. background-color: #F5F6FA. } ``` /*Estilização e alinhamento do cabeçario*/ header{ ``` background-color: #22212F. color: #FFF. height: 80px. font-size: 24px. align-items: center. display: flex. padding-left: 15px. } ``` /*Alinhamento das tags presentes na section*/ section,div.form{ ``` display: flex. justify-content: center. } ``` div.container{ ``` margin:5px. width: 800px. background-color: #FFF. padding: 15px. margin-top: 20px. } ``` div.parag,div.box{ ``` display: block. } ``` div.form{ ``` margin-top:30px. } ``` p{ ``` margin-top: 10px. } ``` /*estilização do formulario principal*/ ```.shadow{ box-shadow: 5px 5px 5px 2px #22212F. } ``` fieldset{ ``` width: 500px. min-height:150px. padding: 10px. } ``` legend{ ``` font-size: 20px. } ``` input#token{ ``` font-size: 16px. width: 350px. height: 30px. } ``` button#btntoken{ ``` margin: 5px. margin-top:15px. width:480px. height: 50px. font-size: 24px. } ``` /*estilização da resposta ao usuário*/ ```.aling{ margin: 20px. }.painting{ display: inline-block. width: 230px. min-height: 100px. } ```

Decoding

Filhote de Dev

Atribuindo valores do http.response para variáveis Json