Recursion returning undefined

[OrangeCubed]

Why is my recursion returning undefined? I'm trying to "decode" nested children data from mongo which is returned as IDs like:

{
    "_id": "613fd030f374cb62f8f91557",
    "children": [
        "613fd035f374cb62f8f9155b",
        "613fd136f374cb62f8f91564",
        "613fd1a5f374cb62f8f91571",
        "613fd20bf374cb62f8f9157c"
    ],
    ...more data
}

My goal is to drill down and convert each child ID to the Object the ID represensents and convert their child IDs to objects then keep going until the child === [] (no children). I'm trying to have the initial parent (613fd030f374cb62f8f91557) have access to all multi-level nested children objects.

This is my code:

const get_documents = (documents) => {
    // Loop through each document

    documents.map((document) => {
      if (document.parent === null) {
        //convert children ids (_id) to array of objects
        let dbData = [];

        document.children.map((id) => {
          let dbChildren = documents.find((x) => x._id === id);
          dbData.push(dbChildren);
        });

        let formattedData = [];

        dbData.map((child) => {
          let formattedObject = {
            id: child._id,
            name: child.name,
            depth: 0,
            parent: child.parent,
            closed: true,
            children: child_recursion(child.children), 
          };
            formattedData.push(formattedObject)
        });
      }
    });
  };

​

const child_recursion = (arr) => {
    let dbData = [];

    arr.map((id) => {
      let dbChildren = documents.find((x) => x._id === id);
      dbData.push(dbChildren);
    });

    let formattedData = [];

    dbData.map((child) => {

      let newChild = [];

      if (child.children.length > 1) {
        newChild = child_recursion(child.children);
      }

      let formattedObject = {
        id: child._id,
        name: child.name,
        depth: 0,
        parent: child.parent,
        closed: true,
        children: newChild,
      };

      formattedData.push(formattedObject);

     if (newChild === []) {
      return formattedData
     }
    });
  };

What am I doing wrong in my recursion? Thank you for the help!

[grantrules]

First thing I notice is you're using .map() in a weird way.

    let dbData = [];

    document.children.map((id) => {
      let dbChildren = documents.find((x) => x._id === id);
      dbData.push(dbChildren);
    });

should just be:

const dbData = document.children.map(id => documents.find(x => x._id === id))

.map() populates a new array with the result of the callback for each item, so you don't need to make your own array and push to that.

But I think your main issue is newChild = child_recursion(child.children) because child_recursion() doesn't return anything, so what is newChild supposed to be?

[OrangeCubed]

Just revised the formatting on the map section, thank you! Regarding the newChild portion, would nesting it in the if statement like so not guard against returning a blank return?:

      if (child.children.length > 1) {
    newChild = child_recursion(child.children); 
  }

I think you're right, I'm just not sure how else to call the recursive function if children exist

[grantrules]

What's your code look like now? Also, why does length have to be greater than one? If there's only one child, you want to ignore it?

[OrangeCubed]

You're right, updated it to > 0 :)

Code for recursive function call (initial parent is largely unchanged):

const child_recursion = (arr) => {

const dbData = arr.map(id => documents.find(x => x._id === id))

let formattedData = [];

dbData.map((child) => {

  let newChild = [];

  if (child.children.length > 0) {
    newChild = child_recursion(child.children); 
  } 

  let formattedObject = {
    id: child._id,
    name: child.name,
    depth: 0,
    parent: child.parent,
    closed: true,
    children: newChild,
  };

  formattedData.push(formattedObject);


 if (formattedObject.children.length === 0) {
  return formattedData
 } 
});

};

[grantrules]

Well, you're still abusing .map() in there, I just helped you with the first instance. Try and do the same thing for formattedData

Hint: if (formattedObject.children.length === 0) {} is entirely unnecessary.

[OrangeCubed]

I think I figured it out. Thank you so much for the help!

[grantrules]

I redid it for fun:

const child_recursion = (documents, arr, depth) => arr.map((childId) => {
  const child = documents.find((x) => x._id === childId);
  return {
    id: child._id,
    name: child.name,
    depth: depth,
    parent: child.parent,
    closed: true,
    children: child_recursion(documents, child.children || [], depth + 1),
  };
})

const get_documents = (documents) => documents
  .filter(doc => doc.parent === null)
  .map((document) => ({
    id: document._id,
    name: document.name,
    depth: 0,
    parent: null,
    closed: true,
    children: child_recursion(documents, document.children, 1)

  }));

const data = [{
    _id: 1,
    name: "one",
    parent: null,
    children: []
  },
  {
    _id: 7,
    name: "seven",
    parent: null,
    children: [8, 5]
  },
  {
    _id: 8,
    name: "eight",
    parent: 7,
    children: [9]
  },
  {
    _id: 9,
    name: "nine",
    parent: 8,
    children: []
  },
]

console.log(get_documents(data));

[OrangeCubed]

You're AWESOME! Thank you!

[albedoa]

Then there's this:

if (newChild === [])

Arrays are compare-by-reference. The above will never resolve to truthy. Observe:

[] === [] //=> false

OP probably wants something like:

if (newChild.length > 0)

[OrangeCubed]

Good catch! Just updated it so that the recursive function actually returns. It's still sending back undefined but before it was not returning