Troubleshooting recursive function errors in a Javascript menu

Question

Troubleshooting recursive function errors in a Javascript menu

//check out this current jsfiddle for more details: http://jsfiddle.net/0ht35rpb/45/

I'm attempting to create a loop through a JSON navigation tree in order to match the alternative language counterpart when a user navigates to a specific page.

//Here is the JSON structure:

{
    "langs" : [
        {
            "lang"  : "de",
            "lines" : {
                // German language menu items and links here...
            }
        },
        {
            "lang"  : "en",
            "lines" : {
                // English language menu items and links here...
            }
        }
    ]
}

My JavaScript functions are designed to handle this scenario based on the current language and URL. For instance, if CURRENTLNG is set to 'en' and CURRENTURL is '/en/services', the function fetchFooterUrls() should return an array with ['/en/services', '/de/dienstleistungen']. However, it encounters issues with retrieving third level navigation counterparts like ["/en/popular-projects/compliance/compliance-eng", "/de/beliebte-projekte/compliance/compliance-pruefung-kmu"].

Your script for navigating through the language pair URLs looks promising, but there may be some errors in implementation that need resolving. It's crucial to ensure the correct handling of children elements within the JSON object for smooth navigation experience.

//If you're a moderator or expert on this subject, your input would be greatly appreciated!

javascript json recursion

Answer 1

Answer №1

After updating the jsfiddle, the errors related to the recursive function call in the else part were fixed. Check out the updated jsfiddle here

The code has been modified as follows:

if (!obj[k].hasOwnProperty('children') || obj[k].children.length <= 0) continue;
var ret = getUrl(pairUrl, currentLng, enMenu[k].children, deMenu[k].children, obj[k].children);
if(typeof ret != 'undefined') return ret;

// JavaScript code snippet
// defining linkTreeObject with language details and menu items

function getLanguagePair(currentLng, pairUrl) {
  // Function to find URL in JSON tree based on current language
  var enMenu = linkTreeObject.langs[1].lines.menu;
  var deMenu = linkTreeObject.langs[0].lines.menu;

  let obj = {};
  if (currentLng === 'de') {
    obj = deMenu;
  } else {
    obj = enMenu;
  }

  return getUrl(pairUrl, currentLng, enMenu, deMenu, obj);
}

// Testing the functionality of getLanguagePair function
console.log(getLanguagePair("en", "/en/how-it-works"));
console.log(getLanguagePair("en", "/en/popular-projects"));
console.log(getLanguagePair("de", "/de/anleitung"));
console.log(getLanguagePair("de", "/de/beliebte-projekte"));

// Tests that are expected to fail
console.log(getLanguagePair("en", "/en/services/compliance"));
console.log(getLanguagePair("en", "/en/popular-projects/compliance"));
console.log(getLanguagePair("en", "/en/popular-projects/compliance/compliance-eng"));

Answer 2

After updating the jsfiddle, the errors related to the recursive function call in the else part were fixed. Check out the updated jsfiddle here

The code has been modified as follows:

if (!obj[k].hasOwnProperty('children') || obj[k].children.length <= 0) continue;
var ret = getUrl(pairUrl, currentLng, enMenu[k].children, deMenu[k].children, obj[k].children);
if(typeof ret != 'undefined') return ret;

// JavaScript code snippet
// defining linkTreeObject with language details and menu items

function getLanguagePair(currentLng, pairUrl) {
  // Function to find URL in JSON tree based on current language
  var enMenu = linkTreeObject.langs[1].lines.menu;
  var deMenu = linkTreeObject.langs[0].lines.menu;

  let obj = {};
  if (currentLng === 'de') {
    obj = deMenu;
  } else {
    obj = enMenu;
  }

  return getUrl(pairUrl, currentLng, enMenu, deMenu, obj);
}

// Testing the functionality of getLanguagePair function
console.log(getLanguagePair("en", "/en/how-it-works"));
console.log(getLanguagePair("en", "/en/popular-projects"));
console.log(getLanguagePair("de", "/de/anleitung"));
console.log(getLanguagePair("de", "/de/beliebte-projekte"));

// Tests that are expected to fail
console.log(getLanguagePair("en", "/en/services/compliance"));
console.log(getLanguagePair("en", "/en/popular-projects/compliance"));
console.log(getLanguagePair("en", "/en/popular-projects/compliance/compliance-eng"));

Answer 3

Answer №2

There appears to be an issue with your recursive function. When the URL does not match during the initial function call, the function is recursively called again but without a proper return statement.

function get_10_recursive(number){
  if(number>=10) return 10;
  else return get_10_recursive(number++);
}

In this scenario, if the number is less than 10, the function will continue to be called recursively until it reaches a return statement. At that point, the stack is unwound and the correct result is returned. However, if you remove the return statement in the third line, the code will execute but only provide the result of the initial call, which is undefined.

The issue lies in your code where placing a return statement inside the for loop interrupts the loop and prevents further checking of subsequent strings. Therefore, it is necessary to store the results of the function calls in a temporary variable and only return it if it is truthy (i.e., not undefined).

Your modified getUrl function should look like this:

function getUrl(pairUrl, currentLng, enMenu, deMenu, obj) {
  for (var k in obj) {
    if (obj[k].link === pairUrl) {
      if (currentLng === 'de') {
        return enMenu[k].link; // retrieve equivalent English link
      } else {
        return deMenu[k].link; // retrieve equivalent German link
      }
    } else {
      if (obj[k].hasOwnProperty('children')){
      var tmp =  getUrl(pairUrl, currentLng, enMenu[k].children, deMenu[k].children, obj[k].children);
      if(tmp) return tmp; // check if successful match found
      }
    }
  }
}

Note: The statement

if (!obj.hasOwnProperty(k)) continue

was removed as it was deemed unnecessary.

Answer 4

There appears to be an issue with your recursive function. When the URL does not match during the initial function call, the function is recursively called again but without a proper return statement.

function get_10_recursive(number){
  if(number>=10) return 10;
  else return get_10_recursive(number++);
}

In this scenario, if the number is less than 10, the function will continue to be called recursively until it reaches a return statement. At that point, the stack is unwound and the correct result is returned. However, if you remove the return statement in the third line, the code will execute but only provide the result of the initial call, which is undefined.

The issue lies in your code where placing a return statement inside the for loop interrupts the loop and prevents further checking of subsequent strings. Therefore, it is necessary to store the results of the function calls in a temporary variable and only return it if it is truthy (i.e., not undefined).

Your modified getUrl function should look like this:

function getUrl(pairUrl, currentLng, enMenu, deMenu, obj) {
  for (var k in obj) {
    if (obj[k].link === pairUrl) {
      if (currentLng === 'de') {
        return enMenu[k].link; // retrieve equivalent English link
      } else {
        return deMenu[k].link; // retrieve equivalent German link
      }
    } else {
      if (obj[k].hasOwnProperty('children')){
      var tmp =  getUrl(pairUrl, currentLng, enMenu[k].children, deMenu[k].children, obj[k].children);
      if(tmp) return tmp; // check if successful match found
      }
    }
  }
}

Note: The statement

if (!obj.hasOwnProperty(k)) continue

was removed as it was deemed unnecessary.

Troubleshooting recursive function errors in a Javascript menu

Answer №1

Answer №2

Similar questions

I am selecting specific items from a list to display only 4 on my webpage

What are the steps I need to take in order to resolve the

Is it possible to utilize a jQuery function to count JSON data based on specific keys and values?

Offline parsing of JSON data on Android

Tips on viewing class object values within the `useEffect` hook

Count the number of items in a JSON array in AngularJS with a specific ID

Employing AJAX, execute a synchronous function asynchronously (Javascript)

Emphasize the designated drop zone in Dragula

What is the best way to initiate a Bootstrap carousel so that it begins with the first image every time a modal window appears

Is it more efficient to perform data sorting on the client side or the server side?

Utilizing jQuery for JSON parsing

Express Validator: The Art of Isolating Validation Logic

I'm having trouble loading my Google Maps widget. Everything was functioning flawlessly until I attempted to hide it using the .hide function

Could we display an error message from Poloniex through printing it?

The JSON.stringify() function helps to convert data into a JSON-formatted string, avoiding any potential "c

Having trouble with FullCalendar not showing the correct time for events pulled from a

"Is there a way to extract a specific value from an XML file based on another element

Angular.js reports that the custom HTTP response header is missing

Accessing QML Functions from JavaScript

Rendering basic JSON data from the console to an HTML page using Angular