I cannot access value of a JSON object and display it in the div

Asked

Viewed 87 times

1

I’m running some tests with a file .json with the intention of implementing the code in my application (if I succeed in the tests). I am using the following json file.

Follows the code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="">
    <title>Testando</title>
    <style>
      body {
        margin: 0px;
        padding: 0px;
        background-color: #ccc;
      }
      div {
        width: 40%;
        height: 200px;
        margin: auto;
        border: 1px solid #000;
        margin-top: 50px;
        background-color: #fff;
        border-radius: 5px;
      }
    </style>
  </head>

  <body>
    <div>
    
    </div>
    
    <script>
      var div = document.querySelector('div');
      var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
      var request = new XMLHttpRequest();
      request.open('GET', requestURL);
      request.responseType = 'json';
      request.send();
      
      request.onload = function(){
        var obras = request.response;
        procuraObra(obras);
      }
      
      function procuraObra(jsonObj){
        var nomeObras = jsonObj['members']['name'];
        
        for (var i = 0; i < nomeObras.length; i++){
          if (nomeObras[i] == 'Madame Uppercut'){
            var resultado = nomeObras[i];
          }
        }
        if (resultado != null){
          var primeiroP = document.createElement('p');
          primeiroP.textContent = resultado;
        }
        div.appendChild(primeiroP);
      }
    </script>
  </body>
</html>

Explaining from the functions: 

function procuraObra(jsonObj){
  var nomeObras = jsonObj['members']['name'];

In the above section I want to save the amount of names, which according to the file I am using are 3. In the section below I want to keep the name Madame Uppercut (it exists in the archive).

for (var i = 0; i < nomeObras.length; i++){
  if (nomeObras[i] == 'Madame Uppercut'){
    var resultado = nomeObras[i];
  }
}

After having found and saved the name, in the code below I create the tag <p> and add the name found on it (result variable):

if (resultado != null){
  var primeiroP = document.createElement('p');
  primeiroP.textContent = resultado;
}

And finally I add in div to tag <p> containing the name:

div.appendChild(primeiroP);
javascript json front-end

1 answer

3


The main problem is in this row below that you are trying to iterate with for:

var nomeObras = jsonObj['members']['name'];

Actually the array is just the jsonObj['members'], and the name is a key of the array objects, so the variable nomeObras should be:

var nomeObras = jsonObj['members'];

And in the if within the for you will compare if the key name is equal to the searched string:

if(nomeObras[i].name == 'Madame Uppercut'){...

If the if is met, the result variable should be the key value name, and you can put a break after the variable resultado to interrupt the for, since it was found the value that wanted to search:

var resultado = nomeObras[i].name;
break;

The code will look like this:

var div = document.querySelector('div');
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();

request.onload = function(){
   var obras = request.response;
   procuraObra(obras);
}

function procuraObra(jsonObj){
   var nomeObras = jsonObj['members'];

   for (var i = 0; i < nomeObras.length; i++){
      if (nomeObras[i].name == 'Madame Uppercut'){
         var resultado = nomeObras[i].name;
         break;
      }
   }
   if (resultado != null){
      var primeiroP = document.createElement('p');
      primeiroP.textContent = resultado;
   }
   div.appendChild(primeiroP);
}
body {
  margin: 0px;
  padding: 0px;
  background-color: #ccc;
}
div {
  width: 40%;
  height: 200px;
  margin: auto;
  border: 1px solid #000;
  margin-top: 50px;
  background-color: #fff;
  border-radius: 5px;
}
<div></div>

  • It was exactly what I needed, now I will work with the parse to abstract to the maximum this structure. worth!

Browser other questions tagged javascript json front-end

You are not signed in. Login or sign up in order to post.