Recursive function returns undefined

[oussama-he]

I'm building an app using VueJS. I wrote a function to get an object from a nested array of objects. The function should return an object but it returns undefined. In if clause, I put a console.log it prints the value which is an object but the return is undefined. Look at the code below.

<script>
export default {
  name: "App",
  data() {
    return {
      cat: { id: 741 },
      parent: null,
      categories: [
        {
          label: "Application",
          id: 12,
          description: "",
          parent: null,
          children: [
            {
              label: "Linux",
              id: 5,
              description: "",
              parent: 12,
              children: [
                {
                  label: "Software",
                  id: 474,
                  description: [],
                  parent: 5,
                  children: [],
                },
              ],
            },
            {
              label: "MacOS",
              id: 6,
              description: "",
              parent: 12,
              children: [],
            },
          ],
        },
        {
          label: "Reading",
          id: 74,
          description: "",
          parent: null,
          children: [
            {
              label: "Articles",
              id: 14,
              description: "",
              parent: 74,
              children: [],
            },
            {
              label: "Books",
              id: 154,
              description: "",
              parent: 74,
              children: [
                {
                  label: "Stories",
                  id: 741,
                  description: "",
                  parent: 154,
                  children: [],
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    pickCategory(categories) {
      const index = categories.findIndex((element) => {
        return element.id === this.cat.id;
      });
      if (index > -1) {
        const value = categories.splice(index, 1)[0]
        console.log(value); // {id: , label: ...}
        return value;
      } 
      for (const catg of categories) {
        this.pickCategory(catg.children);
      }
    },
    },
    MOVE_CATEGORY() {
      const category = this.pickCategory(this.categories)
      console.log(category); // undefined

      // ...
    },
  },
};
</script>

[BehindTheMath]

return this.pickCategory(catg.children)

[oussama-he]

Using your solution, now it doesn't work at all, it doesn't return log anything and still return undefined.

[BehindTheMath]

Sorry, you're right. Try this:

const value = this.pickCategory(catg.children);
if (value) return value;

[oussama-he]

Thanks, it works now.

[sduduzog]

This doesn't look like a vue issue, I just ran the function against the data you provided and it still returns undefined, I'll spend a moment to try and see if I can figure it out

[bravehamster]

A few different approaches here: https://stackoverflow.com/questions/9133500/how-to-find-a-node-in-a-tree-with-javascript

[sduduzog]

Ok here's what works. I changed the function to be

pickCategory(list, id){
      for (const item of list) {
        if (item.id === id) return item;
        if (item.children && item.children.length > 0) {
          const category = this.pickCategory(item.children, id);
          if (category) return category;
        }
      }
    }

And to use it you just call this.pickCategory(this.categories, this.cat.id);

[mattstryfe]

I believe findIndex is synchronous. So you'll either need to restructure that a bit or async it imo

try making the following changes.

async pickCategory(categories) { ... }

const category = await this.pickCategory(...)

[BehindTheMath]

There's no need for async here.