How to find exact property value using recursion in javascript(typescript)?

Question

Let say i have a object response like this

const response = [
    {
        "title": "Menu 1",
        "subMenu": [
            {
                "title": "Menu 1.2"
            }
        ]
    },
    {
        "title": "Menu 2",
    },
    {
        "title": "Menu 3",
        "subMenu": [
            {
                "title": "Menu 3.1",
                "subMenu": [
                    {
                        "title": "Menu 3.2"
                    }
                ]
            }
        ]
    },
    
]

I want to get the object have title "Menu 3.1" using recursion so i wrote this function

const findElement = (arr, title) => {
  for (let index = 0; index < arr.length; index++) {
    const menu = arr[index];
    if (menu.title === title) {
      return menu;
    } else if (menu.subMenu) {
      return findElement(menu.subMenu, title);
    }
  }
};

and call it like this

console.log(findElement(response, "Menu 3.1" ))

but it log 'undefined'? What did i do wrong?

trace what is happening, and you'll see that when checking response[0], it goes into menu 1 submenu, and that's it - doesn't even check response[1] — Jaromanda X
– Jaromanda X, Commented Oct 7, 2022 at 8:08

Jaromanda X · Accepted Answer · 2022-10-07 08:20:53Z

3

The issue is, that the code checks response[0], it isn't a match, so checks responsep[0].submenu, but it returns the result of checking that, therefore, the for loop is short-circuited because the target isn't found

What you want to do, when checking sub-menu is check if the there is a result and only return it if there is

A little like this

const response = [{
        "title": "Menu 1",
        "subMenu": [{
                "title": "Menu 1.2"
            }
        ]
    }, {
        "title": "Menu 2",
    }, {
        "title": "Menu 3",
        "subMenu": [{
                "title": "Menu 3.1",
                "subMenu": [{
                        "title": "Menu 3.2"
                    }
                ]
            }
        ]
    },
]

const findElement = (arr, title) => {
    for (let index = 0; index < arr.length; index++) {
        const menu = arr[index];
        if (menu.title === title) {
            return menu;
        } // no need for else since we return above
        if (menu.subMenu) {
            const sub = findElement(menu.subMenu, title);
            if (sub) return sub;
        }
    }
};

console.log(findElement(response, "Menu 3.1"))

edited Oct 7, 2022 at 8:20

answered Oct 7, 2022 at 8:08

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jaromanda X Over a year ago

@RoryMcCrossan, that was my testing :p had some console.logs in there so I could describe exactly what the code was doing wrong :p

sonphung.xf Over a year ago

thanks a lot, the code is working now!

tao · Accepted Answer · 2022-10-07 17:53:02Z

I'd definitely use a reducer here:

const reducer = (result, item) =>
  result ||
  (item.title === "Menu 3.1"
    ? item
    : item.subMenu?.reduce(reducer, null) || null)

console.log(response.reduce(reducer, null))

const response = [
  {
    title: "Menu 1",
    subMenu: [
      {
        title: "Menu 1.2"
      }
    ]
  },
  {
    title: "Menu 2"
  },
  {
    title: "Menu 3",
    subMenu: [
      {
        title: "Menu 3.1",
        subMenu: [
          {
            title: "Menu 3.2"
          }
        ]
      }
    ]
  }
]

const findItemByTitle = (items, title) => {
  const reducer = (result, item) =>
    result ||
    (item.title === title
      ? item
      : item.subMenu?.reduce(reducer, null) || null)

  return items.reduce(reducer, null)
}

console.log(findItemByTitle(response, "Menu 3.1"))

return result if it's already found
else return current item if title matches
else return the search for item on current item's submenu if item has submenu (recursion)
else return null (=> goes to next item without a result)

Collectives™ on Stack Overflow

How to find exact property value using recursion in javascript(typescript)?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related