0
126
VistasOrganizar mensajes de chat por fecha
Estoy trabajando con Vue, pero esta es una pregunta general de JavaScript. Hago una llamada a una API para obtener mensajes de gato para una interfaz de usuario de chat. La llamada inicial devuelve una matriz de objetos donde cada objeto es un objeto de mensaje de chat como se muestra a continuación.
data: [ 0: {id: 1, created_at: "2022-05-20T15:12:40.000000Z", updated_at: "2022-05-20T17:18:03.000000Z",…} 1: {id: 2, created_at: "2022-05-20T15:12:41.000000Z", updated_at: "2022-05-20T17:18:04.000000Z",…} 2: {id: 3, created_at: "2022-05-20T15:12:41.000000Z", updated_at: "2022-05-20T17:18:04.000000Z",…} 3: {id: 4, created_at: "2022-05-20T15:12:41.000000Z", updated_at: "2022-05-20T17:18:04.000000Z",…} ]Inicialmente quería formatear el mensaje para que se puedan agrupar por fechas en la ventana de chat. Este es el código que usé para agruparlos.
This is a computed property in vue
const formattedChats = computed(() => { let dateFormattedMessages = messages.value.map(message => { return {...message, updated_at: new Date(message.updated_at).toDateString(), created_at: new Date(message.created_at).toDateString()} }) return dateFormattedMessages.reduce((total, currentValue) => { total[currentValue.updated_at] = total[currentValue.updated_at] || []; total[currentValue.updated_at].push(currentValue); return total; }, Object.create(null)); }) Lo anterior primero tomará cada objeto de chat y convertirá su updated_at y created_at en una cadena de fecha y luego agrupará la matriz usando la updated_at. El resultado fue el siguiente:
formattedChats = { Fri Jun 24 2022: [ {...}, {... ] Fri May 20 2022:[ {...}, {... ] Mon Jun 27 2022:Array[ {...}, {... ] Sat May 21 2022:Array[ {...}, {... ] Tue Jun 28 2022:Array[ {...}, {... ] } Si te fijas, el problema al que me enfrento es que las fechas no están dispuestas en ningún orden. no tiene sentido representarlo en la interfaz de usuario de esta manera porque los chats resultantes no se organizan por fecha. Así es como debería verse la interfaz de usuario 
1 Respuestas
Responde la pregunta0
Debe usar matrices (o un mapa) para mantener ordenado el orden. Yo usaría una matriz de matrices. Primero debe ordenar los datos en la fecha (utilicé updated_at , que hice del tipo Fecha en la matriz de datos). Luego iterar sobre la matriz ordenada. Vea el fragmento a continuación.
const data = [{ id: 1, updated_at: new Date("2022-05-21T15:12:40.000000Z"), created_at: "2022-05-20T17:18:03.000000Z" }, { id: 2, updated_at: new Date("2022-05-20T15:12:41.000000Z"), created_at: "2022-05-20T17:18:04.000000Z" }, { id: 3, updated_at: new Date("2022-05-23T15:12:41.000000Z"), created_at: "2022-05-20T17:18:04.000000Z" }, { id: 4, updated_at: new Date("2022-05-21T15:12:41.000000Z"), created_at: "2022-05-20T17:18:04.000000Z" }, ] const sortedData = data.sort( (a, b) => Number(a.updated_at) - Number(b.updated_at), ); let currentDay = sortedData[0].updated_at; const stillCurrentDay = (dayOfMessage) => { return dayOfMessage.getFullYear() === currentDay.getFullYear() && dayOfMessage.getMonth() === currentDay.getMonth() && dayOfMessage.getDate() === currentDay.getDate() } let dayMessageArray = []; const fullMessageArray = []; const createMessagesArray = (messages) => { const newDay = {}; newDay[currentDay.toISOString().split('T')[0]] = messages; fullMessageArray.push(newDay); } sortedData.forEach(message => { if (!stillCurrentDay(message.updated_at)) { createMessagesArray(dayMessageArray); currentDay = message.updated_at; dayMessageArray = []; } dayMessageArray.push(message); }); createMessagesArray(dayMessageArray); console.log(fullMessageArray);Espero que esto ayude. Tal vez hay formas más fáciles, por favor hágamelo saber.