Estoy realizando el consumo de una api la cual los datos generados los quiero mostrar en mi html, para eso estoy realizando la creación de elementos div mediante javascript, al momento de mostrar la información lo hace sin problemas, pero estoy teniendo un inconveniente y es que cada vez que actualizo la pagina los datos los muestra en orden diferente, es decir, si tengo 3 div el div que estaba de primero ahora aparecerá de ultimo y así va cambiando el orden cada vez que actualizo la pagina:
Este es mi codigo Javascript:
const cargar_noticias_recientes = async () => {
const noticias_recientes = document.querySelector('#pnl-body-content-card-reci');
const res = await fetch(`WebService_Default.asmx/cargar_card_noticia_recientes`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: ''
});
const datos = await res.json();
let nuevos = [...datos.d];
nuevos.map(async nuevo => {
const div = document.createElement('div');
const peticion = await fetch(`http://localhost:51482/api/values/${nuevo[3]}`, {
method: 'GET'
});
const imagen = await peticion.blob();
const url = URL.createObjectURL(imagen);
div.innerHTML = `
<div class="body-card body-card-reci ${nuevo[0]}">
<div class="card-title">
<span>Nuevo</span>
</div>
<div class="img-card">
<div class="img" style="background-image: url(${url});"></div>
</div>
<div class="content-card">
<p>
<i class="fas fa-tags"></i> ${nuevo[1]}
</p>
</div>
</div>
`
noticias_recientes.appendChild(div);
});
}