2

Boa noite, estou usando phonegap para fazer um aplicativo e então surgio o seguinte problema:

Tenho esse código em HTML:

<div class="content">   

<article class="underline">
        <a href="incidente.html"><img id="incidente"  
         src="img/buraco.jpg" alt="Incidente" /></a>
        <h2><a href="basic_markup.html" id="tit"></a></h2>
        <p id="desc"></p>
        <div class="date" id="date"></div>
        <img class="tick" alt="não resolvido" src="img/no-tick.png">
        <img class="apoio" alt="apoiar" src="img/apoio.png">

</article>

E esse Código AJAX que recebe um array do meu banco de dados:

$.ajax({

  type: "GET",
  url: "http://localhost/again/www/index.php",
  dataType: "json",

  success: function (data) {

    var tit = "";
    var desc = "";
    var date = "";
    // Loop over each object
    for (var $i = 0; $i < data.length; $i++) {
        var object = data[$i];

        tit=  object.titulo;
        desc=  object.descricao;
        date=  object.data;


    }
          $('#tit').html(tit);
          $('#desc').html(desc);
          $('#date').html(date);


 }
});

</script>

Gostaria que para cada conjunto de titulo, decrição e data do banco de dados fosse gerado o código HTML que postei acima(um article para cada linha do banco de dados). Alguém poderia me ajudar?

O Json que recebo no ajax tem essa estrutura:

 [{"codigo":"32","0":"32","titulo":"Assalto na Avenida 2","1":"Assalto      
 na Avenida 2","descricao":"Ontem a noite estava passando pela avenida 
 2 quando 1 rapaz me abordou com uma arma e pediu que eu passasse meu 
 celular. Já é a terceira vez que passo por isso.","2":"Ontem a noite   
 estava passando pela avenida 2 quando 1 rapaz me abordou com uma arma 
 e pediu que eu passasse meu celular. Já é a terceira vez que passo 
 por isso.","data":"2015-10-29 21:48:13","3":"2015-10-29 21:48:13"},
 {"codigo":"59","0":"59","titulo":Roubo na rua 5 ,"1":Roubo na rua  
 5,"descricao":Roubaram minha bolsa com meus pertences,"2":Roubaram 
 minha bolsa com meus pertences,"data":"2015-10-30 
 20:45:46","3":"2015-10-30 20:45:46"}]
2
  • Para fazer edições dentre outras coisas é melhor se logar novamente com a sua conta.
    – Math
    Commented 9/11/2015 às 14:38
  • @user35475, atualizei a minha resposta para passar a utilizar a estrutura que postou como exemplo. Commented 9/11/2015 às 15:04

3 Respostas 3

2

Primeira coisa, aconselho que não use id como identificador dentro de um template, lembre-se que você terá este conjunto de elementos clonados e não é interessante ter dois elementos com o mesmo id na pagina, então utilize alguma outro valor, como uma class ou um data-*.

Abaixo segue uma alternativa usando a tag template:

var content = document.getElementById("content");
var tmplItem = document.getElementById("tmplItem");

var data = [
  {
    "codigo": 32,
    "titulo": "Assalto na Avenida 2",
    "descricao": "Ontem a noite estava passando pela avenida 2 quando 1 rapaz me abordou com uma arma e pediu que eu passasse meu celular. Já é a terceira vez que passo por isso.",
    "data": "2015-10-29 21:48:13"
  },
  {
    "codigo": 59,
    "titulo": "Roubo na rua 5",
    "descricao": "Roubaram minha bolsa com meus pertences",
    "data": "2015-10-30 20:45:46"
  }
];

//populando conteudo.
data.forEach(function (dataItem, indice) {
  //clonando conteudo do template.
  var item = document.importNode(tmplItem.content, true);

  //atualizando o novo item com os valores do dataItem atual.
  item.querySelector(".tit").textContent = dataItem.titulo;
  item.querySelector(".desc").textContent = dataItem.descricao;
  item.querySelector(".date").textContent = new Date(dataItem.data).toLocaleString();
  content.appendChild(item);
});
<div id="content">

</div>

<!-- o conteudo deste template será clonado pelo JavaScript -->
<template id="tmplItem">
    <article class="underline">
        <a href="incidente.html">
            <img src="img/buraco.jpg" alt="Incidente" />
        </a>
        <h2>
            <a href="basic_markup.html" class="tit"></a>
        </h2>
        <p class="desc"></p>
        <div class="date"></div>
        <img class="tick" alt="não resolvido" src="img/no-tick.png" />
        <img class="apoio" alt="apoiar" src="img/apoio.png" />
    </article>
</template>

0

Ao que parece, o único problema está em pegar e agrupar o retorno do tipo JSON, mas ainda assim não foi apresentada a estrutura do JSON em uso o que facilitaria ainda mais a compreensão.

Como estás simplesmente a retornar valores, e estás a utilizar jQuery, podes usar o getJSON para obter estes valores.

Como exemplo, para o script jQuery terias:

$(document).ready(function(){
    var data = '';
    $.getJSON('getEach.php', function(retorno){
        $.each(retorno, function(chave, valor){
                data += '<article class="underline">';
                data += '<h2><a href="#" id='+ valor.titulo +'>' + valor.titulo + '</a></h2>';
                data += '<p id=' + valor.id +'></p>';
                data += '<div class="date" id='+ valor.id +'></div>';
                data += '</article>';
            });
            $('.content').append(data);
    });
    });

Para a estrutura html no corpo da página, a div com class='content' seria basicamente isto:

 <body>
  <div class="content">

  </div>
 </body>

Uma vez que não especificaste quais valores são retornados do banco de dados, tomei a liberdade de criar outros:

<?php

//JSON por norma deve possuir o tipo MIME application/json com carateres utf
header('Content-Type: application/json; charset=utf-8');

// Retorno semelhante às colunas do banco de dados.
$data = array(
        array('id'=>20, 'titulo'=>'Primeiro'),
        array('id'=>12, 'titulo'=>'Segundo'),
        array('id'=>8, 'titulo'=>'Terceiro')
             ); 

// Retornar a array no formato JSON          
echo json_encode($data);    

?>  

Referências:

0

N formas de fazer, mas procure sempre evitar escrever o método .html() dentro do laço, isso sobrecarrega o método e pode não funcionar adequadamente. Veja que eu dei a saída no HTML depois do laço FOR:

function viewData(data, el) {

var content='';
for (var i in data) {

 var tit    =data[i].titulo;
 var desc   =data[i].descricao;
 var dateVal=data[i].data;

content+= '<article class="underline">\
            <a href="incidente.html"><img id="incidente"\ src="img/buraco.jpg" alt="Incidente" /></a>\
            <h2><a href="basic_markup.html" id="tit">'+tit+'</a></h2>\
            <p id="desc">'+desc+'</p>\
            <div class="date" id="date">'+dateVal+'</div>\
            <img class="tick" alt="não resolvido" src="img/no-tick.png">\
            <img class="apoio" alt="apoiar" src="img/apoio.png">\
           </article>';
}
$('#'+el).html(content);
}

$(function(){

  $.ajax({
          type: "POST",
          url: "http://localhost/again/www/index.php",
          dataType: "json",
          success: function (data) {
                       viewData(data,'content');
                   }
        });
});

Veja funcionando aqui

2
  • Quando tento esse código que você passou aparece o seguninte erro: "Uncaught ReferenceError: $ is not defined" apontando para a linha: $(function(){ Sabe me dizer por que? Commented 9/11/2015 às 18:37
  • @Ivan ferrer Resolvido, no caso era um problema com a minha biblioteca Jquery. Muito obrigada pela ajuda!! Commented 9/11/2015 às 18:41

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 .