El objetivo de esto es tener comentarios con comentarios secundarios recursivos.
Como datos de ejemplo para esto, hay publicaciones y comentarios que se obtuvieron.
let posts = [ { id: '001a', topic: 'post topic', content: 'post content' } ] let comments = [ { id: '002a', postParent: '001a', directParent: '001a', content: 'comment on post' }, { id: '003a', postParent: '001a', directParent: '002a', content: 'comment on comment' }, { id: '004a', postParent: '001a', directParent: '003a', content: 'comment on comments comment' }, ]Si tuviera que formularlo en palabras, diría: condicionalmente a una clave principal de objetos de comentario, este objeto debería convertirse en un objeto de comentario secundario de su objeto de comentario principal. Para lograr esto, llegué a pensar que necesita una funcionalidad para crear otra matriz. Me gusta:
let postComments = [ { id: '002a', postParent: '001a', directParent: '001a', content: 'comment on post', children: [ { id: '003a', postParent: '001a', directParent: '002a', content: 'comment on comment', children: [ {id: '004a', post: '001a', parent: '003a', content: 'comment on comments comment' }} ] } ] }, ]El enfoque que probé hasta ahora fue resolver esto sin crear una nueva matriz que se extienda. Intenté generar los comentarios condicionalmente en su padre en cada bloque. Desafortunadamente, esto no condujo a una solución escalable (/ para hacerlo recursivamente; no estoy seguro de la terminología correcta aquí ). Así es como llegué al enfoque sobre el que se trata ahora esta pregunta y cómo crear una nueva matriz como se muestra en el ejemplo.
Pero como todavía no estoy seguro de si es una buena solución cuando tengo tales datos, cualquier sugerencia sobre un enfoque probado para tal problema es muy bienvenida.
Desafortunadamente, el extenso REPL que afortunadamente pude crear a partir de las respuestas proporcionadas se sobrescribió al ver y guardar otro REPL. Tuve que eliminar el enlace ahora engañoso, pero la pequeña ventaja es hacer una copia de seguridad de Svelte REPLS si se hizo algo de trabajo. Cosa que no hice. De todos modos, las respuestas a continuación contienen suficientes buenos ejemplos.
let posts = [{ id: '001a', topic: 'post topic', content: 'post content' }] let comments = [ { id: '002a', post: '001a', parent: '001a', content: 'comment on post' }, { id: '003a', post: '001a', parent: '002a', content: 'comment on comment' }, { id: '004a', post: '001a', parent: '003a', content: 'comment on comments comment' }, ] function getNestedComments(parentId) { const subComments = comments.filter((c) => c.parent === parentId) if (subComments.length === 0) return subComments subComments.forEach(c => { c.children = getNestedComments(c.id) }) return subComments } let postComments = getNestedComments('001a') console.log(postComments)Aquí hay otra solución sin función recursiva. Utiliza la búsqueda de mapas.
let posts = [ { id: '001a', topic: 'post topic', content: 'post content' } ] let comments = [ { id: '002a', post: '001a', parent: '001a', content: 'comment on post' }, { id: '003a', post: '001a', parent: '002a', content: 'comment on comment' }, { id: '004a', post: '001a', parent: '003a', content: 'comment on comments comment' } ] let postComments = toNestedComments(comments, posts[0].id); console.log(postComments); function toNestedComments(comments, postId) { const nestedComments = []; const map = {}; for (let i = 0; i < comments.length; i++) { map[comments[i].id] = i; } for (let comment of comments) { if (comment.parent === postId) { nestedComments.push(comment); } else { if (!comments[map[comment.parent]].hasOwnProperty('children')) { comments[map[comment.parent]].children = []; } comments[map[comment.parent]].children.push(comment); } } return nestedComments; }Recuperar los comentarios que pertenecen a un elemento principal específico solo cuando representa ese elemento principal me parece ineficiente, ya que cada vez que intenta generar el código se ejecutará a través de todos sus comentarios para encontrar los que pertenecen a ese elemento principal.
Un mejor enfoque (en mi opinión) es agregar una propiedad children a cada publicación/comentario y completarla, como lo ha hecho en su código. La dificultad aquí es hacer esto de manera de minimizar la cantidad de veces que tiene que 'recorrer' todos los datos.
Una forma es crear una tabla de búsqueda para cada publicación y comentar de esta manera:
const lookup = [...posts, ...comments].reduce((pre, cur) => { cur.children = []; // Prepares an array to hold the children pre[cur.id] = cur; return pre; }, {});Y luego repita los comentarios nuevamente, agregándose al padre que podemos leer en la tabla de búsqueda.
comments.forEach(c => lookup[c.parent].children.push(c)); Debido a cómo funciona javascript con respecto a los objetos, esto dará como resultado que los elementos de las posts y comments originales ahora tengan una propiedad children poblada con los comentarios para ese elemento (y estos comentarios tienen sus propios elementos secundarios).
Ahora puede renderizarlos recursivamente con un componente Post y svelte:self .
{#each children as child} <svelte:self {...child} /> {/each}Esta solución solo pasa dos veces por los datos para construir esta construcción (una para hacer la tabla de búsqueda, una vez para adjuntar los comentarios), por lo que es más eficiente que buscar los comentarios durante el renderizado.
Si sus datos están ordenados de manera que siempre aparecerá un comentario después de su elemento principal, puede mejorarlo aún más presionando a los elementos secundarios del elemento principal al mismo tiempo que crea el mapa:
let map = [...posts, ...comments].reduce((pre, cur) => { cur.children = []; pre[cur.id] = cur; if (cur.parent) pre[cur.parent].children.push(cur); return pre; }, {});edite para ajustarse a los datos proporcionados en el fragmento
const lookup = [...posts].reduce((pre, cur) => { // Either a post or a comment const item = cur.post ?? cur.comment; // Prepares an array to hold the children item.children = []; pre[cur.publicKey] = item; return pre; }, {}); comments.forEach(({ comment }) => lookup[comment.post].children.push(comment));No es perfecto, pero es un comienzo para hacerse una idea. Esto pondrá todos los comentarios en la publicación para que los comentarios no tengan sus propios hijos.