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