1

Estou realizando alguns testes com um arquivo .json com a intenção de implementar o código na minha aplicação (caso eu tenha sucesso nos testes). Estou utilizando o seguinte arquivo json.

Segue o código:

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

Explicando a partir das funções:

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

No trecho acima eu quero guardar a quantidade de nomes, que de acordo com o arquivo que estou usando são 3. No trecho abaixo eu quero guardar o nome Madame Uppercut (ele existe no arquivo).

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

Depois de ter encontrado e salvo o nome, no código abaixo eu crio a tag <p> e adiciono o nome encontrado nela (variável resultado):

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

E por fim adiciono na div a tag <p> contendo o nome:

div.appendChild(primeiroP); 
0

1 Resposta 1

3

O problema principal está nesta linha abaixo que você está tentando iterar com for:

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

Na verdade a array é apenas o jsonObj['members'], e o name é uma chave dos objetos da array, logo a variável nomeObras deveria ser:

var nomeObras = jsonObj['members'];

E no if dentro do for você irá comparar se a chave name é igual à string buscada:

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

Se o if for atendido, a variável resultado deverá ser o valor da chave name, e você pode colocar um break após a variável resultado para interromper o for, já que foi encontrado o valor que queria buscar:

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

O código ficará assim:

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>

1
  • Era exatamente o que eu precisava, agora vou trabalhar com o parse para abstrair ao máximo essa estrutura. valeu! 17/06/2019 às 13:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .