Hello, I'm having trouble with a JS activity, I should make the last posting to be displayed first, I already tried sort, tried sort with function and nothing solves, I can change the order of objects in the array more I can not change the order of them in html, can anyone help me?
var noticias = [];
function atualizarLista(noticia) {
var lista = $('#noticias-recentes-list');
var li = $('<li id="noticia-' + noticia.id + '">');
li.addClass('noticia');
var p_titulo = $('<p>');
p_titulo.addClass('titulo');
p_titulo.attr('onclick', 'mostrarNoticia(' + noticia.id + ')');
p_titulo.html(noticia.titulo);
var p_conteudo = $('<p>');
p_conteudo.addClass('conteudo');
p_conteudo.html(noticia.conteudo
+ '<br>'
+ '<br>'
+ '<button onclick="ocultarNoticia(' + noticia.id + ')">Fechar</button>' + '<br>'
+ '<button onclick="mostrarAutor(' + noticia.id + ')">Mostrar dados do autor</button>' + '<br>'
+ '<button onclick="ocultarAutor(' + noticia.id + ')">Ocultar dados do autor</button>');
var p_autor = $('<p>');
p_autor.addClass('autor');
p_autor.html(
noticia.nome
+ '<br>' +
noticia.email
+ '<br>' +
noticia.data_publicacao);
li.append(p_titulo, p_conteudo, p_autor);
p_autor.hide();
p_conteudo.hide();
lista.append(li);
}
function salvar(form) {
var titulo = $('#frm-titulo').val();
var conteudo = $('#frm-conteudo').val();
var nome = $('#frm-nome').val();
var email = $('#frm-email').val();
var data_publicacao = new Date($('#frm-data').val()).toDate('dd/mm/yyyy hh:ii');
var data_atual = new Date().toDate('dd/mm/yyyy hh:ii');
var noticia = {
id: noticias.length,
titulo: titulo,
conteudo: conteudo,
nome: nome,
email: email,
data_publicacao: data_publicacao,
data_atual: data_atual
};
if (data_publicacao != undefined) {
if (data_publicacao > data_atual || data_publicacao < data_atual) {
alert("Sua notícia foi salva, mas ainda não foi publicada! Aguarde.");
}
else {
noticias.push(noticia);
noticias.sort(compare);
atualizarLista(noticia);
noticias.sort(compare);
alert("Notícia publicada!");
}
}
//form.reset();
}
function mostrarNoticia(id) {
$('.conteudo', '#noticia-' + id).show();
}
function ocultarNoticia(id) {
$('.conteudo', '#noticia-' + id).hide();
}
function ocultarAutor(id) {
$('.autor', '#noticia-' + id).hide();
}
function mostrarAutor(id) {
$('.autor', '#noticia-' + id).show();
}
function compare(a,b) {
console.log(a.data_publicacao);
console.log(b.data_publicacao);
return a.data_publicacao < b.data_publicacao;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Gerenciador de notícias</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://rawgit.com/Lautert/helpers/master/javascript.helpers.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="container header">
<div class="row">
<h1>Gerenciador de notícias</h1>
<h2>Notícias recentes</h2>
<p>Clique no título da notícia para expandir</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 form">
<h2>Cadastrar notícia</h2>
<form class="form" onsubmit="salvar(this); return false;">
<div>
<label for="frm-titulo">Título</label>
<br>
<input type="text" id="frm-titulo" name="titulo" required>
</div>
<div>
<label for="frm-conteudo">Conteúdo</label>
<br>
<textarea id="frm-conteudo" name="conteudo" cols="80" rows="5" required></textarea>
</div>
<div>
<label for="frm-nome">Nome</label>
<br>
<input type="text" id="frm-nome" name="nome" required>
</div>
<div>
<label for="frm-email">E-mail</label>
<br>
<input type="email" id="frm-email" name="email">
</div>
<div>
<label for="frm-data">Data</label>
<br>
<input type="datetime-local" id="frm-data" name="data">
</div>
<div>
<button type="submit">Salvar</button>
<button type="reset" formnovalidate>Limpar</button>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12 lista">
<div id="noticias-recentes">
<ul id="noticias-recentes-list"></ul>
</div>
</div>
</div>
</div>
</body>
</html>
