I have a JSON file that I am calling from JavaScript to paint the content in the HTML. The problem I have is that the new elements in the JSON are placed at the end and I need the new elements to be shown first.
How can I sort the results by id or date?
This is the JSON:
[
{
"id": 1,
"titulo": "Nuevo listado de clientes",
"descripcion": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et est mauris. Suspendisse nisl lectus, iaculis eu ornare vel, tristique a augue. Integer tellus eros, scelerisque vel eros vel, egestas feugiat ligula. Quisque vitae condimentum neque. In semper cursus velit, quis elementum orci feugiat vitae. Nullam quis sodales nunc. Phasellus tincidunt ultrices posuere. Morbi mattis consequat magna, quis dignissim ligula fringilla non. Fusce gravida lacus non pharetra vulputate. Morbi semper tellus sem, ut dapibus diam pretium ac.",
"label": "Nuevo",
"fecha": "2020-12-15",
"categoria": {
"id": 1,
"Nombre": "Nuevo",
"Nuevo": null,
"Mejora": null,
"Error": null,
"published_at": "2020-12-15T11:07:12.654Z",
"created_at": "2020-12-15T11:07:09.920Z",
"updated_at": "2020-12-15T11:07:12.665Z"
},
"published_at": "2020-12-14T19:13:42.744Z",
"created_at": "2020-12-14T19:12:16.327Z",
"updated_at": "2020-12-16T09:02:38.003Z",
"imagen": {
"id": 3,
"name": "placeholder.jpg",
"alternativeText": "",
"caption": "",
"width": 1920,
"height": 1080,
"formats": {
"thumbnail": {
"name": "thumbnail_placeholder.jpg",
"hash": "thumbnail_placeholder_f977a62625",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 245,
"height": 138,
"size": 0.68,
"path": null,
"url": "/uploads/thumbnail_placeholder_f977a62625.jpg"
},
"large": {
"name": "large_placeholder.jpg",
"hash": "large_placeholder_f977a62625",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 1000,
"height": 563,
"size": 4.71,
"path": null,
"url": "/uploads/large_placeholder_f977a62625.jpg"
},
"medium": {
"name": "medium_placeholder.jpg",
"hash": "medium_placeholder_f977a62625",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 750,
"height": 422,
"size": 2.91,
"path": null,
"url": "/uploads/medium_placeholder_f977a62625.jpg"
},
"small": {
"name": "small_placeholder.jpg",
"hash": "small_placeholder_f977a62625",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 500,
"height": 281,
"size": 1.6,
"path": null,
"url": "/uploads/small_placeholder_f977a62625.jpg"
}
},
"hash": "placeholder_f977a62625",
"ext": ".jpg",
"mime": "image/jpeg",
"size": 14.37,
"url": "/uploads/placeholder_f977a62625.jpg",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"created_at": "2020-12-16T09:01:53.525Z",
"updated_at": "2020-12-16T09:01:53.535Z"
}
},
{
"id": 2,
"titulo": "Rediseño del dashboard",
"descripcion": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et est mauris. Suspendisse nisl lectus, iaculis eu ornare vel, tristique a augue. Integer tellus eros, scelerisque vel eros vel, egestas feugiat ligula. Quisque vitae condimentum neque. In semper cursus velit, quis elementum orci feugiat vitae. Nullam quis sodales nunc. Phasellus tincidunt ultrices posuere. Morbi mattis consequat magna, quis dignissim ligula fringilla non. Fusce gravida lacus non pharetra vulputate. Morbi semper tellus sem, ut dapibus diam pretium ac.\n",
"label": "Mejora",
"fecha": "2020-12-14",
"categoria": {
"id": 2,
"Nombre": "Mejora",
"Nuevo": null,
"Mejora": null,
"Error": null,
"published_at": "2020-12-15T11:07:20.614Z",
"created_at": "2020-12-15T11:07:19.411Z",
"updated_at": "2020-12-15T11:07:20.625Z"
},
"published_at": "2020-12-14T19:14:34.394Z",
"created_at": "2020-12-14T19:14:32.729Z",
"updated_at": "2020-12-16T09:02:26.528Z",
"imagen": {
"id": 3,
"name": "placeholder.jpg",
"alternativeText": "",
"caption": "",
"width": 1920,
"height": 1080,
"formats": {
"thumbnail": {
"name": "thumbnail_placeholder.jpg",
"hash": "thumbnail_placeholder_f977a62625",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 245,
"height": 138,
"size": 0.68,
"path": null,
"url": "/uploads/thumbnail_placeholder_f977a62625.jpg"
},
"large": {
"name": "large_placeholder.jpg",
"hash": "large_placeholder_f977a62625",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 1000,
"height": 563,
"size": 4.71,
"path": null,
"url": "/uploads/large_placeholder_f977a62625.jpg"
},
"medium": {
"name": "medium_placeholder.jpg",
"hash": "medium_placeholder_f977a62625",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 750,
"height": 422,
"size": 2.91,
"path": null,
"url": "/uploads/medium_placeholder_f977a62625.jpg"
},
"small": {
"name": "small_placeholder.jpg",
"hash": "small_placeholder_f977a62625",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 500,
"height": 281,
"size": 1.6,
"path": null,
"url": "/uploads/small_placeholder_f977a62625.jpg"
}
},
"hash": "placeholder_f977a62625",
"ext": ".jpg",
"mime": "image/jpeg",
"size": 14.37,
"url": "/uploads/placeholder_f977a62625.jpg",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"created_at": "2020-12-16T09:01:53.525Z",
"updated_at": "2020-12-16T09:01:53.535Z"
}
},
{
"id": 3,
"titulo": "Pasarela fotocasa",
"descripcion": "Hemos mejorado la pasarela de fotocasa de forma que al eliminar, dar de baja, marcar como venido y marcar como alquilado no de error y dicha propiedad sea eliminada del portal.",
"label": null,
"fecha": "2020-12-15",
"categoria": {
"id": 3,
"Nombre": "Corrección",
"Nuevo": null,
"Mejora": null,
"Error": null,
"published_at": "2020-12-15T11:07:29.554Z",
"created_at": "2020-12-15T11:07:27.982Z",
"updated_at": "2020-12-15T11:07:29.565Z"
},
"published_at": "2020-12-15T11:19:19.681Z",
"created_at": "2020-12-15T11:18:46.085Z",
"updated_at": "2020-12-16T09:02:50.840Z",
"imagen": {
"id": 3,
"name": "placeholder.jpg",
"alternativeText": "",
"caption": "",
"width": 1920,
"height": 1080,
"formats": {
"thumbnail": {
"name": "thumbnail_placeholder.jpg",
"hash": "thumbnail_placeholder_f977a62625",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 245,
"height": 138,
"size": 0.68,
"path": null,
"url": "/uploads/thumbnail_placeholder_f977a62625.jpg"
},
"large": {
"name": "large_placeholder.jpg",
"hash": "large_placeholder_f977a62625",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 1000,
"height": 563,
"size": 4.71,
"path": null,
"url": "/uploads/large_placeholder_f977a62625.jpg"
},
"medium": {
"name": "medium_placeholder.jpg",
"hash": "medium_placeholder_f977a62625",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 750,
"height": 422,
"size": 2.91,
"path": null,
"url": "/uploads/medium_placeholder_f977a62625.jpg"
},
"small": {
"name": "small_placeholder.jpg",
"hash": "small_placeholder_f977a62625",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 500,
"height": 281,
"size": 1.6,
"path": null,
"url": "/uploads/small_placeholder_f977a62625.jpg"
}
},
"hash": "placeholder_f977a62625",
"ext": ".jpg",
"mime": "image/jpeg",
"size": 14.37,
"url": "/uploads/placeholder_f977a62625.jpg",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"created_at": "2020-12-16T09:01:53.525Z",
"updated_at": "2020-12-16T09:01:53.535Z"
}
}
]
And this the javascript when I need to order the results by id or date. How can I do it?
const notificaciones = document.querySelector('#notificaciones')
document.addEventListener("DOMContentLoaded", function(event) {
fetchData()
});
const fetchData = async () => {
try {
const res = await fetch('./data/data.json')
const data = await res.json()
notis(data)
} catch (error) {
console.log (error)
}
}
const notis = (data) => {
let elementos = ''
for (let [index, item] of data.entries()) {
elementos += `
<article class="bg-white shadow-md rounded-lg">
<div class="content grid grid-cols-1 gap-4 p-8">
<h2 class="text-xl text-gray-800">${item.titulo}</h2>
<div class="label flex items-center">
<p class="bg-blue-400 text-xs p-1 text-white font-semibold uppercase px-3 rounded-md tracking-wider inline-block">${item.categoria.Nombre}</p>
<p class="text-sm pl-3 text-gray-400">${item.fecha}</p>
</div>
<div class="content">
<p class="text-gray-600 tracking-wide font-light mt-1">${item.descripcion}</p>
<img class="mt-6" src="${`http://127.0.0.1:5500/public${item.imagen.url}`}">
</div>
</div>
<div class="footer bg-gray-100 relative">
<div class="reactions absolute -top-4 h-10 w-full flex justify-center space-x-2">
<span class="emoji-container w-8 inline-block"><img src="./assets/emojiNeg.svg" alt="Negative"></span>
<span class="emoji-container w-8 inline-block"><img src="./assets/emojiNeut.svg" alt="Neutral"></span>
<span class="emoji-container w-8 inline-block"><img src="./assets/emojiPos.svg" alt="Positive"></span>
</div>
<form action=""><textarea class="feedback-input mb-1.5 w-full text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-300" name="feedback" id="feedback" placeholder="Envíanos tus comentarios"></textarea></form>
</div>
</article>
`
}
notificaciones.innerHTML = elementos
}
