0

Boa noite amigos, tenho o seguinte json que é originado de uma url, o resultado é exatamente esse:

{
"cod": "OS78946",
"serv": "Pré pago",
"passo": "7894",
"ocorridos": [

    {
        "data": "21\/02\/2020",
        "hora": "19:38",
        "onde": "Pato Branco\/PR",
        "oque": [
            "teste um"
        ]
    },

    {
        "data": "21\/02\/2020",
        "hora": "18:09",
        "onde": "Maringa\/PR",
        "oque": [
            "teste dois"
        ]
    },

    {
        "data": "21\/02\/2020",
        "hora": "17:00",
        "onde": "Muriaé\/MG",
        "oque": [
            "teste oito"
        ]
    }
]}

Segue meu código, seguindo essa linha de raciocínio, como listar os valores de "data", "hora" e "oque" que estão dentro do objeto "ocorridos"? Travei na última linha do javascript.

<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

</head>
<body>
  <div class="d-flex justify-content-center" id="teste">
    <div class="">Resultado
      <h5 id="h5-teste"></h5>
      <p id="cod"></p>
      <p id="serv"></p>
      <p id="passo"></p>
      <p id="lista_ocorridos"></p>
    </div>
  </div>

<script type="text/javascript">
$(function(){
$.ajax({
url: 'https://localhost/1.json',
dataType: 'json',
success: function(volta){
if(volta.status == "ERROR"){
alert(volta.message + "Inacessível no momento, tente mais tarde");
return false;
}
$("#cod").html(volta.cod);
$("#serv").html(volta.serv);
$("#passo").html(volta.passo);
//$("#lista_ocorridos")...;
}});
});
</script>

</body>
</html>

1
  • ocorridos é um array, precisa fazer um for/foreach para listar tudos os valores dele Commented 24/02/2020 às 0:51

3 Respostas 3

0

Como comentei, ocorridos é um array, por isso precisa acessar cada elemento do array para poder listar seu conteúdo. A mesma coisa para oque que também é um array. Pode fazer isso por exemplo usando o comando for:

var volta = {
"cod": "OS78946",
"serv": "Pré pago",
"passo": "7894",
"ocorridos": [
    {
        "data": "21\/02\/2020",
        "hora": "19:38",
        "onde": "Pato Branco\/PR",
        "oque": [
            "teste um"
        ]
    },

    {
        "data": "21\/02\/2020",
        "hora": "18:09",
        "onde": "Maringa\/PR",
        "oque": [
            "teste dois"
        ]
    },
    {
        "data": "21\/02\/2020",
        "hora": "17:00",
        "onde": "Muriaé\/MG",
        "oque": [
            "teste oito"
        ]
    }
]};


for(var i=0; i< volta.ocorridos.length; i++) {
   var item = volta.ocorridos[i];
   console.log(item.data + " " + item.hora);
   for (var j=0; j<item.oque.length; j++) {
      console.log(item.oque[j]);
   }
}

2
  • Ricardo, no caso do meu código, é necessário adaptar algo pra incluir o seu? Pra constar, sou iniciante em javascript. Desde já obrigado pela atenção Commented 24/02/2020 às 2:29
  • a parte do for vc pode usar diretamente no seu código logo depois de encerrar o if(volta.status == "ERROR"){. De qualquer forma, tente entende o que foi feito e pergunte se precisar, se só copiar e usar o código não vai te ajudar ;) Commented 24/02/2020 às 10:54
0

Como ocorridos é um array, você pode acessar o seu conteúdo da seguinte forma:

    $.each(volta.ocorridos, function(index, obj) {
  console.log(obj.data);
  console.log(obj.hora);
  console.log(obj.onde);
  $.each(obj.oque, function(index2, obj2) {
    console.log(obj2);
  });
});
0

Só complementando como disseram... uma implementação completa em jQuery seria:

<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE-edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="d-flex justify-content-center" id="teste">
      <div class="">
        Resultado
        <h5 id="h5-teste"></h5>
        <p id="cod"></p>
        <p id="serv"></p>
        <p id="passo"></p>
        <br />
        <label>forma 1</label>
        <ul id="lista_ocorridos"></ul>
        <br />
        <label>forma 2</label>
        <ul id="lista_ocorridos2"></ul>
      </div>
    </div>

    <script type="text/javascript">
      $(function() {
        $.ajax({
          url:
            "https://localhost/1.json",
          dataType: "json",
          success: function(volta) {
            if (volta.status == "ERROR") {
              alert(volta.message + "Inacessível no momento, tente mais tarde");
              return false;
            }
            console.log(volta);
            $("#cod").html(volta.cod);
            $("#serv").html(volta.serv);
            $("#passo").html(volta.passo);

            if (Array.isArray(volta.ocorridos)) {
              // forma 1
              const ocorridos = volta.ocorridos;
              for (let index = 0; index < ocorridos.length; index++) {
                const ocorrido = ocorridos[index];
                $("#lista_ocorridos").append(
                  `<li id='ocorrido${index}'><p> Cidade: ${ocorrido.onde}</li>`
                );

                if (Array.isArray(ocorrido.oque)) {
                  const oques = ocorrido.oque;
                  for (let index2 = 1; index2 <= oques.length; index2++) {
                    const oque = oques[index2 - 1];
                    $(`#ocorrido${index}`).append(
                      `<ul id='oques'><li>${index2}: ${oque}  </li></ul>`
                    );
                  }
                }
              }

              // forma 2
              $("#lista_ocorridos2").html(
                `${volta.ocorridos.reduce((acumulador, ocorrido) => {
                  return (acumulador += `<li>
                    <p>Cidade: ${ocorrido.onde}<p>
                    ${Array.isArray(ocorrido.oque) &&
                      `<p>Motivos:
                        <ul>
                          ${ocorrido.oque.reduce(
                            (acc, oq, index) =>
                              (acc += `<li> ${++index}: ${oq}</li>`),
                            ""
                          )}
                        </ul>
                      <p>`}
                  </li>`);
                }, "")}`
              );
            }
          }
        });
      });
    </script>
  </body>
</html>

Tem outras formas de fazer além dos dois exemplos! Use indentação no seu código para melhor elegibilidade (algumas linguagens só funcionam assim, ex: python,lua), um editor como o VS Code com plugins pode te facilitar muito na indentação/formatação do seu código ;).

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 .