
En créant ma composante pour permettre au lecteurs de laisser des commentaires sur les articles, j'avais besoin de pouvoir supprimer toutes les réponses attachées à un message.
Pour y parvenir, il me fallait trouver le moyen de pouvoir sélectionner tous les messages qui sont des descendants directs du message sélectioné (enfants, leur petits enfants etc...).
En regardant sur internet je n'ai pas pu trouver solution. Il m'a fallu créer la mienne dans laquelle j'utilise une fonction récursive.

## Mon stack

Pour présenter ce problème, j'utiliserai :

- [Mongodb](/stack?stack=mongo-db) : une base de données
- [Javascript](/stack?stack=javascript) : mon language de programmation.

## Exemple de données

Ma base de données des commentaires a la structure suivante:

```mongodb:mongodb
[
  {"_id":"1", "parentId":null, "body": "message direct", ...},
  {"_id":"2", "parentId":"1", "body": "reponse directe au message 1", ...},
  {"_id":"3", "parentId":"2", "body": "reponse directe au message 2", ...},
  {"_id":"4", "parentId":"1", "body": "reponse directe au message 1", ...},
  {"_id":"5", "parentId":null, "body": "message direct", ...}
  {"_id":"6", "parentId":2, "body": "message direct", ...}
  ...
]
```

## Solution

Mon objectif comme expliqué est de supprimer par exemple pour le message avec l'\_id = 1, toutes les réponses qui lui sont affectées et les réponses des réponses également. En d'autre termes, supprimer les messages avec les ids 2,4,3(réponse de 2) et 6(réponse de 2) et ainsi de suite. La fonction doit me permettre d'avoir la liste des ids à supprimer ([1,2,4,3,6]).

Pour y parvenir, je crée d'abord une fonction qui me permet de récupérer dans un tableau donné, tous les enfants directs d'un message. En d'autre terme, récupérer pour le message 1 toutes les données qui ont pour parentId, 1 (les ids 2 et 4).

```jsx:getAllCommentToDelete.jsx
const getChildrenByComment = (commentId, allComments) => {
  let children = allComments
    .filter(comment => comment.parentId === commentId)
    .map(child => child._id)
  return children
}
...
```

Dans le même fichier, je crée enfin la function qui me permettra de récupérer tous les descendants.

De crée une fonction getAllChildren qui me permet de recupérer tous les descendants que j'ajoute dans mon tableau **allCommentsToDelete**.

```jsx:getAllCommentToDelete.jsx
...
export const getAllCommentToDelete = (commentId, allComments) => {
  let allCommentsToDelete = []
  const getAllChildren = (commentId, allComments) => {
    allCommentsToDelete.push(commentId)
    let children = getChildrenByComment(commentId, allComments)
    for (let i = 0; i < children.length; i++) {
      const element = children[i]
      getAllChildren(element, allComments)
    }
  }
  getAllChildren(commentId, allComments)
  return allCommentsToDelete
}
```

### Résultat

Dans le page de mon application, je peux faire appelle à la fonction et récupérer toutes les valeurs.

```jsx:page.jsx
import {getAllCommentToDelete} from "./getAllCommentToDelete"

const data = [...] // base de données mongodb

const listIdsToDelete = getAllCommentToDelete("1", data)

console.log("resultat",listIdsToDelete)

//resultat [1,2,4,3,6]
```


Codes

Comment récupérer tous les descendants d'un élément parent en utilisant javascript?

Javascript - 21 avr. 2022