How to list JSON data in a div using jquery?

Asked

Viewed 109 times

-1

Friends, I have the following JSON:

{
"codigo": "12345",
"cerca": "Rato",
"host": "df",
"eventos": [
    {
        "data": "21\/02\/2020",
        "hora": "19:38",
        "local": "Moema\/SP",
        "status": "Morto",
        "subTim": [
            "Um dia sem PC"
        ]
    },
    {
        "data": "21\/02\/2020",
        "hora": "18:29",
        "local": "Tatuapé\/SP",
        "status": "Meio vivo",
        "subTim": [
            "Quatro dias sem PC"
        ]
    },
    {
        "data": "21\/02\/2020",
        "hora": "18:09",
        "local": "Anápolis\/GO",
        "status": "Só tonto",
        "subTim": [
            "Dois dias sem PC"
        ]
    }
]}

I can correctly load some JSON data into the form as well with JS:

jQuery("#codigo").val(resposta.codigo);
jQuery("#cerca").val(resposta.cerca);
jQuery("#host").val(resposta.host);

What is the correct jquery way to list "events", with "date", "status" and "subTim" in a #registered div in the form ? Example:

Occurrences: My code: 12345 / Fence: Mouse / Host: df

Event1: 21/02/2020 19:38 / Status: Dead / Subtim: A day without PC

Event2: 21/02/2020 18:29 / Status: Half alive / Subtle: Four days without PC

Event3: 21/02/2020 18:09 / Status: Only dizzy / Subtim: Two days without PC

Thank you so much for your attention

jquery json

1 answer

1


Buddy, the code is a bit plastered. You can do better (more dynamic). But take a look and see if it suits you. Any doubt, you warn in the comment, I try to improve something. You could adapt better according to your need. That answer was just to give you an idea of where to go. 

<!DOCTYPE html>
<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">

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</head>

<body>
  <div class="d-flex justify-content-center" id="teste">
    <div class="">
      <h5 id="h5-teste"></h5>
      <p id="p-teste-1"></p>
      <p id="p-teste-2"></p>
      <p id="p-teste-3"></p>
    </div>
  </div>

  <script>
    let json = {
      "codigo": "12345",
      "cerca": "Rato",
      "host": "df",
      "eventos": [{
          "data": "21\/02\/2020",
          "hora": "19:38",
          "local": "Moema\/SP",
          "status": "Morto",
          "subTim": [
            "Um dia sem PC"
          ]
        },
        {
          "data": "21\/02\/2020",
          "hora": "18:29",
          "local": "Tatuapé\/SP",
          "status": "Meio vivo",
          "subTim": [
            "Quatro dias sem PC"
          ]
        },
        {
          "data": "21\/02\/2020",
          "hora": "18:09",
          "local": "Anápolis\/GO",
          "status": "Só tonto",
          "subTim": [
            "Dois dias sem PC"
          ]
        }
      ]
    }

    let codigo;
    let rato;
    let host;

    let evento_1;
    let evento_2;
    let evento_3;

    $.each(json, function(index, value) {
      if (index == "codigo") {
        codigo = "Ocorridos: Meu código: " + value + " / ";
      }
      if (index == "cerca") {
        rato = "Rato: " + value + " / ";
      }
      if (index == "host") {
        host = "Host: " + value;
      }

      if (index == "eventos") {

        $.each(value, function(chave, valor) {
          if (chave == 0) {
            evento_1 = "Evento 1: " + valor.data + " " + valor.hora + " / Status: " + valor.status + " / SubTim: " + valor.subTim[0];
          }
          if (chave == 1) {
            evento_2 = "Evento 2: " + valor.data + " " + valor.hora + " / Status: " + valor.status + " / SubTim: " + valor.subTim[0];
          }
          if (chave == 2) {
            evento_3 = "Evento 3: " + valor.data + " " + valor.hora + " / Status: " + valor.status + " / SubTim: " + valor.subTim[0];
          }
        });
      }
    });

    codigo += rato;
    codigo += host;

    $("#h5-teste").html(codigo);
    $("#p-teste-1").html(evento_1);
    $("#p-teste-2").html(evento_2);
    $("#p-teste-3").html(evento_3);
  </script>

</body>

</html>

  • I used jQuery (as you requested) and Bootstrap (I only used to line up there, for the laziness of doing in CSS, rs). I hope it suits you.

  • It worked perfectly Gambi, my last question about: How does it look instead of Let json, to load this same json data from an external url? Let url = "https://.... ? the remote url response structure is the same.

  • @Anacavalcante , I could not answer before, because I was blocked by the absurd reason of vote manipulation. But you have already solved your problem ? You can do this your situation with Ajax.

  • 1

    Gave straight @Gambi, your response was of great help. Thank you.

Browser other questions tagged jquery json

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