JSFiddle - React, Tailwind, and code Playground

by Ivan Ferrer

HTML

<div id="content" class="content">   
</div>

JavaScript

function viewData(data, el) {



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

 var tit    =data[i].titulo;
 var desc   =data[i].descricao;
 var dateVal=formatDate(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(){

    var data = [{"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"}];
    
viewData(data,'content');
});

function formatDate(data) {
  var regExt = /([0-9]{4})\-([0-9]{2})\-([0-9]{2})\s([0-9]{2}):([0-9]{2}):([0-9]{2})/; 
  return data.replace(regExt,'$3/$2/$1 $4h$5');
}