Create elements with Json information

Question

I am creating a program where I have a json object and I want to display it in one that I am creating via script but unfortunately I am not able to create these elements, when it arrives in the view function it did not contain the requested elements.. Please give me a light. follows the code:

HTML:

<form>
        <div id="decoding" class="aling"></div>
      </form>

Javascript:

function view(objJson){
  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: ${objJson["numero_casas"]}<br>
  Token: ${objJson["token"]}<br>
  Cifrado: ${objJson["cifrado"]}<br>
  Decifrado: ${objJson["decifrado"]}<br>
  Resumo Criptografico: ${objJson["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: ${objJson["numero_casas"]}<br>
  Token: ${objJson["token"]}<br>
  Cifrado: ${objJson["cifrado"]}<br>
  Decifrado: ${objJson["decifrado"]}<br>
  Resumo Criptografico: ${objJson["resumo_criptografico"]}`)

  box.appendChild(challenge)
  box.appendChild(answer)
  challenge.appendChild(legendChallenge)
  answer.appendChild(legendAnswer)
}

The variable objJson stores this value: {"numero_casas":9,"token":"68c56aa784fe216ae92720b76386ea0995055074","cifrado":"fqnw rw mxdkc, unjen rc xdc. sxbqdj kuxlq","decifrado":"","resumo_criptografico":""}

Answer 1

Tadeu, the error is only in innerHTML, because it is a property, not a function:

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

---

Fixing that part, your code worked:

function view(objJson){

  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: ${objJson["numero_casas"]}<br>
  Token: ${objJson["token"]}<br>
  Cifrado: ${objJson["cifrado"]}<br>
  Decifrado: ${objJson["decifrado"]}<br>
  Resumo Criptografico: ${objJson["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: ${objJson["numero_casas"]}<br>
  Token: ${objJson["token"]}<br>
  Cifrado: ${objJson["cifrado"]}<br>
  Decifrado: ${objJson["decifrado"]}<br>
  Resumo Criptografico: ${objJson["resumo_criptografico"]}`;

  box.appendChild(challenge);
  box.appendChild(answer);
  challenge.appendChild(legendChallenge);
  answer.appendChild(legendAnswer);
}

view({"numero_casas":9,"token":"68c56aa784fe216ae92720b76386ea0995055074","cifrado":"fqnw rw mxdkc, unjen rc xdc. sxbqdj kuxlq","decifrado":"","resumo_criptografico":""});

<form>
  <div id="decoding" class="aling"></div>
</form>