Skip to main content
adicionou 321 caracteres ao conteúdo
Fonte Link
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52
var content = document.getElementById("content");
var tmplItem = document.getElementById("tmplItem");

//montandovar umdata array= com[
 6 itens,{
 no seu exemplo você"codigo": irá32,
 receber ele da sua"titulo": requisição"Assalto AJAX.na Avenida 2",
var data = []
for (var"descricao": indice"Ontem =a 1;noite indiceestava <=passando 6;pela indice++)avenida {
2 quando data1 rapaz me abordou com uma arma e pediu que eu passasse meu celular.push({ Já é a terceira vez que passo por isso.",
    titulo"data": "titulo"2015-10-29 0"21:48:13"
 + indice},
  {
    descricao"codigo": "Descricao59,
 0" + indice, "titulo": "Roubo na rua 5",
    data"descricao": "Data"Roubaram 0"minha +bolsa indicecom 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;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>
var content = document.getElementById("content");
var tmplItem = document.getElementById("tmplItem");

//montando um array com 6 itens, no seu exemplo você irá receber ele da sua requisição AJAX.
var data = []
for (var indice = 1; indice <= 6; indice++) {
  data.push({ 
    titulo: "titulo 0" + indice, 
    descricao: "Descricao 0" + indice, 
    data: "Data 0" + indice
  });
}

//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 = dataItem.data;
  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>
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>
adicionou 10 caracteres ao conteúdo
Fonte Link
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52

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");

//montando um array com 6 itens, no seu exemplo você irá receber ele da sua requisição AJAX.
var data = []
for (var indice = 1; indice <= 6; indice++) {
  data.push({ 
    titulo: "titulo 0" + indice, 
    descdescricao: "Descricao 0" + indice, 
    datedata: "Data 0" + indice
  });
}

//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.desc;descricao;
  item.querySelector(".date").textContent = dataItem.date;data;
  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>

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");

//montando um array com 6 itens, no seu exemplo você irá receber ele da sua requisição AJAX.
var data = []
for (var indice = 1; indice <= 6; indice++) {
  data.push({ 
    titulo: "titulo 0" + indice, 
    desc: "Descricao 0" + indice, 
    date: "Data 0" + indice
  });
}

//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.desc;
  item.querySelector(".date").textContent = dataItem.date;
  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>

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");

//montando um array com 6 itens, no seu exemplo você irá receber ele da sua requisição AJAX.
var data = []
for (var indice = 1; indice <= 6; indice++) {
  data.push({ 
    titulo: "titulo 0" + indice, 
    descricao: "Descricao 0" + indice, 
    data: "Data 0" + indice
  });
}

//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 = dataItem.data;
  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>

Fonte Link
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52

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");

//montando um array com 6 itens, no seu exemplo você irá receber ele da sua requisição AJAX.
var data = []
for (var indice = 1; indice <= 6; indice++) {
  data.push({ 
    titulo: "titulo 0" + indice, 
    desc: "Descricao 0" + indice, 
    date: "Data 0" + indice
  });
}

//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.desc;
  item.querySelector(".date").textContent = dataItem.date;
  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>