按id或日期显示JSON JavaScript

我有一个JSON文件，我正在从JavaScript调用该文件以在HTML中绘制内容。我的问题是JSON中的新元素放在末尾，我需要先显示新元素

如何按id或日期对结果排序

这是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"
  }
  }
  ]

当我需要按id或日期排序结果时，这就是javascript。我怎么做

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
}

const notificationes=document.querySelector（“#notificationes”）
document.addEventListener（“DOMContentLoaded”），函数（事件）{
fetchData（）
});
const fetchData=async（）=>{
试一试{
const res=wait fetch（'./data/data.json'）
const data=await res.json（）
notis（数据）
}捕获（错误）{
console.log（错误）
} 
}
常量notis=（数据）=>{
设elementos=''
for（让[index，item]为data.entries（））{
elementos+=`
${item.titulo}
${item.categoria.Nombre}
${item.fecha}
${item.description}
`
}
notificaciones.innerHTML=elementos
}

您可以使用

array.sort（（a，b）=>a.id-b.id）

---

这将根据用户Blex对阵列进行排序。这就是解决方案：data.reverse（）

---

谢谢大家

请不要错过任何其他细节。给定副本的哪些部分不清楚？在执行

notis（数据）之前

，您可以执行

data.reverse（）