Jump to content
Robson Barros da Rocha

JSON retorna apenas um row

Recommended Posts

Boa noite.

 

Estou com problemas para exibir dados pelo .JSON :( No banco de dados, tenho 3 rows (três resultados), mas, ele mostra somente um. Alguém poderia me dizer o que posso ter errado?

 

O JSON retornado é:

[
  {
    "id": 7,
    "linha": "TESTE",
    "chegada": "18:45:00",
    "saida": "19:05:00",
    "tempoTabela": "0:20",
    "tempoParada": "TESTE",
    "previsao": "TESTE",
    "status": "<span data-viagem=\"1\" class=\"label label-warning\"><i class=\"fa fa-clock\" title=\"Pendente\"></i> Pendente</span>"
  },
  {
    "id": 8,
    "linha": "TESTE",
    "chegada": "18:45:00",
    "saida": "19:05:00",
    "tempoTabela": "0:20",
    "tempoParada": "TESTE",
    "previsao": "TESTE",
    "status": "<span data-viagem=\"1\" class=\"label label-warning\"><i class=\"fa fa-clock\" title=\"Pendente\"></i> Pendente</span>"
  }
]

O scrip:

		$.ajax({
			type: "GET",
			url: web +"include/ajax.php",
			timeout: 3000,
			datatype: 'JSON',
			contentType: "application/json; charset=utf-8",
			cache: false,
			beforeSend: function() {
				$('#loading').show();
			},
			error: function() {
				$('#loading').hide();
			},
			success: function(s) {
				var tr = s;
				$.each(tr,function(i, data){
					if(data.emptyDay) {
						var item = '<tr><td colspan="10" align="center"><i class="fa fa-times text-danger"></i> <b>'+ data.emptyDay +'</b></td></tr>';
					} else {
						var item = '<tr tr-id="'+ data.id +'"><td>#'+ data.id +'</td><td>'+ data.linha +'</td><td class="center">'+ data.chegada +'</td><td class="center">'+ data.saida +'</td><td class="center">'+ data.tempoTabela +'</td><td class="center">'+ data.tempoParada +'</td><td class="center">'+ data.previsao +'</td><td class="center">'+ data.status +'</td><td><i class="fa fa-pencil text-info" onclick="edit('+ data.id +')" style="cursor:pointer;"></i> | <i class="fa fa-times text-danger" onclick="deletes('+ data.id +')" style="cursor:pointer;"></i></td></tr>';
					}
					$("#trHorarios").html(item);
					finalizar_viagem(data.id);
					NProgress.done();
				});
			}
		});

 

Share this post


Link to post
Share on other sites

Seu erro é simples, pelo seu código você está substituindo o valor dentro #trHorarios sempre pelo valor atual da iteração:

 

.html você insere o conteúdo dentro do corpo do elemento mas não mantém o item atual somente reescreve o dom

$("#trHorarios").html(item);

agora altere para isso:

$("#trHorarios").append(item);

O append adiciona o novo item mantendo os items existentes dentro do corpo do elemento

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Rafael da Silveira
      Boa noite. Tudo bem?
      Pessoal, estou com um problema aparentente simples. Tenho uma api que esta sendo consumida por paginas em HTML.
       
      Ao carregar essa pagina, busco na api as informações do usuario e crio uma varial para acessar as informações. 
       
      O problema é que os dados só chegam depois que a pagina esta renderizada.
       
      Como faço para esperar o carregamento dos dados e somente depois continuar a rederização? 
       
      Estou usando a api Fetch().
       
      Abraço
    • By Lobo_RJ
      Código muito suspeito em javascript - Recebi de um amigo um link muito suspeito para o site iinet.com, me chamou a atenção porque utiliza o protocolo HTTP. Na página principal deste site, outro link remete à página do site easystreet.com, que também utiliza o protocolo HTTP. Realizei uma pesquisa no whois.net e o domínio iinet.com foi localizado, mas o domínio easystreet.com não foi localizado. Foi então que decidi inspecionar o código da página inicial de cada um do domínios e me chamou a atenção o código abaixo, encontrado na página inicial do domínio easystreet.com:
       
      <!doctype html>
      ...
      <link rel="pingback" href="http://easystreet.com/xmlrpc.php">
      ...
      <script data-avast-pam="y" type="text/javascript" name="AVAST_PAM_submitInjector">
            (function _submitInjector() {
              var f = document.querySelectorAll("form")[0]; // eslint-disable-line no-undef
              if (!f._avast_submit) {
                f._avast_submit = f.submit;
              }
              try {
                Object.defineProperty(f, "submit", {
                  get: function get() {
                    return function (prev_submit) {
                      prev_submit.call(this);
                      if (this._avast_inside_submit) {
                        return;
                      }
                      this._avast_inside_submit = true;
                      var evt = document.createEvent("CustomEvent");
                      evt.initEvent("scriptsubmit", true, true); // bubbling & cancelable
                      this.dispatchEvent(evt);
                      delete this._avast_inside_submit;
                    }.bind(this, this._avast_submit);
                  },
                  set: function set(submitFunc) {
                    this._avast_submit = submitFunc;
                  }
                });
              } catch (ex) {
                // ignored
              }
            })();
      </script>
      ...
      </html>
       
      Eu fiquei surpreso quando fiz uma pesquisa acerca da existência de algum arquivo do Avast denominado PAM e encontrei um arquivo C:\ProgramData\AVAST Software\Avast\pam\pam.json contendo dados como abaixo:
       
      {
        "json_version": 14,
        "update_frequency": 432000,
        "services": [
          {
            "version": 8,
            "icon_url": "https://pamcdn.avast.com/pamcdn/icons/facebook_com.png",
            "popular": 1,
            "url": "facebook.com",
            "login_url": "https://www.facebook.com",
            "name": "Facebook"
          },
          {
            "version": 8,
            "icon_url": "https://pamcdn.avast.com/pamcdn/icons/instagram_com.png",
            "popular": 1,
            "url": "instagram.com",
            "login_url": "https://www.instagram.com/accounts/login/",
            "name": "Instagram"
          },
          {
            "version": 12,
            "icon_url": "https://pamcdn.avast.com/pamcdn/icons/imdb_com.png",
            "popular": 0,
            "url": "imdb.com",
            "login_url": "https://www.imdb.com/registration/signin",
            "name": "IMDB"
          },
      ... (centenas de outros)
      }
       
      Eu não possuo conhecimento aprofundado de javascript, mas a existência do pingback (<link rel="pingback" href="http://easystreet.com/xmlrpc.php">) me levantou a suspeita de que este seja um exploit destinado à um ataque DDoS ou coisa pior como a coleta de credenciais de acesso dos usuários que cliquem nos links que levem às páginas do domínio easystreet.com, por isto eu venho aqui pedir a ajuda dos amigos que possuem um maior conhecimento de javascript.
       
      Desde já eu agradeço por qualquer colaboração.
       
      Lobo
      "Sempre aprendendo..."
    • By Jamersonjds
      Pra aprendizado, estou tentando listar dados do banco de dados e trazer os resultados para meu html.
      Estou conseguindo fazer com este código.
       
      <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <title>Chat</title> <link rel="stylesheet" href="../public/style/reset.css"> <link rel="stylesheet" href="../public/style/chatStyle.css"> <!-- É adicionado a biblioteca jquery e o fontAwesome --> <link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet"> <link href="../public/style/fontawesome/css/all.css" rel="stylesheet"> <script src="../public/js/jquery.min.js"></script> </head> <style> .test2 { cursor: pointer; } </style> <script> $(document).ready(function(){ var itens = "", url = "../includes/configs/chat.php", itens2 = ""; // Capturar dados usando Método AJAX do jquery $.ajax({ url: url, cache: false, dataType: "json", success: function(retorno){ for(var i = 0; i<retorno.length; i++){ itens += "<li>"; itens += "<a class='test2' onclick='function retornou(){$('.Tes22').html('wadwd')}'>"; itens += "<div class='imgUserList'>"; itens += "<div class='widthUserImg'>"; itens += "<div class='imgUserListD'><img src='https://avatars0.githubusercontent.com/u/3966553?s=460&v=4' alt=''></div>"; itens += "</div>"; itens += "<div class='textUserList'>"; itens += "<input type='text' class='pegarID' value='" + retorno[i].id + "'>"; itens += "<span class='title'>" + retorno[i].email + "</span>"; itens += "<h1 class='title'>Está online</h1>"; itens += "</div>"; itens += "</div>"; itens += "</a>"; itens += "</li>"; } $(".pessoas").html(itens); } }) }); </script> <body onload="carregarItens()"> <div class="container"> <div class="listaPessoas"> <div class="headerPeople title"> <h1>Contatos</h1> <h2 class="Tes22"></h2> </div> <ul class="pessoas"> <!-- <li> <a href=""> <div class="imgUserList"> <div class="widthUserImg"> <div class="imgUserListD"><img src="https://avatars0.githubusercontent.com/u/3966553?s=460&v=4" alt=""></div> </div> <div class="textUserList"> <span class="title">10.1.196.90</span> <h1 class="title">Está online</h1> </div> </div> </a> </li> --> </ul> </div> <div class="chat"> <div class="chatHeader"> <div class="title text"> <h1>james</h1> </div> <div class="menuUser title"> <i class="fas fa-ellipsis-h"></i> </div> </div> <div class="chatMessage"> </div> <div class="chattext"> <form action=""> <input type="text" id="modal"> <button><i class="fas fa-paper-plane"></i></button> </form> </div> </div> <div class="infoPessoas"> </div> </div> <script src="../public/js/chat.js"></script> </body> </html> Porém estou querendo pegar apenas o ID e colocar em um <h2> e não estou conseguindo.
      Exemplo: Ao clicar em um dado vindo do banco de dados como é listado acima eu colocar o ID dele no <h2>.
       
      Este é meus dados vindo do PHP já no json.
      echo json_encode($dados, JSON_PRETTY_PRINT);  
    • By everton_araujo
      Olá pessoal, bom dia.
      Gostaria de pedir a ajuda de vcs na criação desse filtro que estou fazendo com a tag option.
      Basicamente gostaria que ao ser mudada a seleção com o value correspondente, a classe pudesse ter o atributo css display:block; e as demais display:none;
       
       
       <select id="mySelect" onchange="myFunction()">
          <option value="todas" >Todas</option>
          <option value="advogadas">Advogadas</option>
          <option value="consultora">Consultora de apoio a adolescentes e universidades internacionais</option>
          <option value="coordenadora">Coordenadoras da Educação</option>
          <option value="coach">Coachs</option>
           <option value="psicologas">Psicólogas</option>
            <option value="gestora">Gestora de comunicação</option>
             <option value="veterinaria">Veterinária</option> <option value="recursos">PHD em Recursos Humanos</option>
        </select>
       
      <div class="todas">conteúdo aqui</div>
      <div class="advogadas">conteúdo aqui</div>
      <div class="consultora">conteúdo aqui</div>
      <div class="coordenadora">conteúdo aqui</div>
      ....Assim por diante...
       
      Desde já, agradeço.
    • By weltonmatos
      Estou instalando na plataforma Tray uma Pop Up de saída que surge quando o usuário leva o cursor pra barra de navegação. A pop aparece. O que não funciona é o botão fechar.
       
      function stick_close() { $('.stick_container').fadeOut(function() { $(this).remove(); }); $('.stick_block_layer').fadeOut(function() { $(this).remove(); }); $.removeData( document.body, "stick_var" ); } $.stick_close = function() { stick_close(); } <div id="modal-newsletter" style="display:none;" class="stick_popup"> <div class="stick_close" onclick="$.stick_close()">X</div> <div class="stick_content"> <h1>Teste</h1> </div> </div>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.