Working with deeply nested objects in JavaScript

Question

Working with deeply nested objects in JavaScript

Given the following array structure:

  objNeeded = [
    {onelevel: 'first'},
    {
      onelevel: 'second',
      sublevels: [
        {onelevel: 'domain'},
        {onelevel: 'subdomain'}
      ]
    },
    {
      onelevel: 'third',
      sublevels: [
        {
          onelevel: 'fourth',
          sublevels: [
            {onelevel: 'domain'}
          ]
        }
      ]
    }
  ];

The objective is to transform it into this object structure:

  objNeeded = {
    first: true,
    second: {
      domain: true,
      subdomain: true
    },
    third: {
      fourth: {
        domain: true
      }
    }
  };

This transformation may involve more nested objects and additional items in the original array.

What approach can be used to achieve this using JavaScript or Typescript?

javascript typescript

Answer 1

Answer №1

If you're facing a specific issue that requires recursion, it might be best to implement it for your use case. Due to the complexity of this problem, I won't delve into detailed explanations here. However, I've included some comments within the code for reference.

const objNeeded = [
    {onelevel: 'first'},
    {
      onelevel: 'second',
      sublevels: [
        {onelevel: 'domain'},
        {onelevel: 'subdomain'}
      ]
    },
    {
      onelevel: 'third',
      sublevels: [
        {
          onelevel: 'fourth',
          sublevels: [
            {onelevel: 'domain'}
          ]
        }
      ]
    }
  ];
  
  // Based on my understanding, the rules are as follows:
  // 1. If the value is a string, it becomes {[key]: true}
  // 2. If there are subLevels, we recursively build the sub arrays.

 function recursivelySetSubLevels(elements) {
   const output = {};
   
   elements.forEach(element => {
    
    if(!!element.sublevels) {
      
      output[element.onelevel] = recursivelySetSubLevels(element.sublevels);
      
    } else {
      
      output[element.onelevel] = true;
      
    }
   });
   
   return output;
 }
 
 console.log(recursivelySetSubLevels(objNeeded));

Answer 2

If you're facing a specific issue that requires recursion, it might be best to implement it for your use case. Due to the complexity of this problem, I won't delve into detailed explanations here. However, I've included some comments within the code for reference.

const objNeeded = [
    {onelevel: 'first'},
    {
      onelevel: 'second',
      sublevels: [
        {onelevel: 'domain'},
        {onelevel: 'subdomain'}
      ]
    },
    {
      onelevel: 'third',
      sublevels: [
        {
          onelevel: 'fourth',
          sublevels: [
            {onelevel: 'domain'}
          ]
        }
      ]
    }
  ];
  
  // Based on my understanding, the rules are as follows:
  // 1. If the value is a string, it becomes {[key]: true}
  // 2. If there are subLevels, we recursively build the sub arrays.

 function recursivelySetSubLevels(elements) {
   const output = {};
   
   elements.forEach(element => {
    
    if(!!element.sublevels) {
      
      output[element.onelevel] = recursivelySetSubLevels(element.sublevels);
      
    } else {
      
      output[element.onelevel] = true;
      
    }
   });
   
   return output;
 }
 
 console.log(recursivelySetSubLevels(objNeeded));

Answer 3

Answer №2

In this scenario, utilizing Array#reduce along with recursive calls can simplify the task at hand.

With Array#reduce, you have the ability to transform the array into an object format efficiently.
The recursive call is employed in order to delve into the inner sublevels of the data structure.

const neededObj = [{level: 'first'}, { level: 'second', sublevels: [ {level: 'domain'}, {level: 'subdomain'} ] }, { level: 'third', sublevels: [ { level: 'fourth', sublevels: [ {level: 'domain'} ] } ] } ];

const result = neededObj.reduce((acc, {
  level,
  sublevels
}) => (acc[level] = sublevels ? recursiveFunction(sublevels) : true, acc), {});

function recursiveFunction(array) {
  return Object.assign({}, ...array.map(({
    level,
    sublevels
  }) => ({
    [level]: sublevels ? recursiveFunction(sublevels) : true
  })))
}

console.log(result)

Answer 4

In this scenario, utilizing Array#reduce along with recursive calls can simplify the task at hand.

With Array#reduce, you have the ability to transform the array into an object format efficiently.
The recursive call is employed in order to delve into the inner sublevels of the data structure.

const neededObj = [{level: 'first'}, { level: 'second', sublevels: [ {level: 'domain'}, {level: 'subdomain'} ] }, { level: 'third', sublevels: [ { level: 'fourth', sublevels: [ {level: 'domain'} ] } ] } ];

const result = neededObj.reduce((acc, {
  level,
  sublevels
}) => (acc[level] = sublevels ? recursiveFunction(sublevels) : true, acc), {});

function recursiveFunction(array) {
  return Object.assign({}, ...array.map(({
    level,
    sublevels
  }) => ({
    [level]: sublevels ? recursiveFunction(sublevels) : true
  })))
}

console.log(result)

Answer 5

Answer №3

Here is a special function customConvert that can help you achieve your desired output.

Utilizing the for (obj of currentObj) loop allows us to iterate through the values in the array and perform the necessary object conversions.

By using Object.keys(obj), we are able to retrieve an array containing all the keys present in the object. Additionally, the .includes method checks if the provided value exists within the array.

The customConvert function employs recursion, triggering a recursive call when a current array object contains sublevels.

function customConvert(currentObj) {
  // initializing result object
  let result = {};

  // iterating through array values
  for (obj of currentObj) {
    // checking for sublevels in obj. Recursively call if found.
    if (Object.keys(obj).includes("sublevels")) {
      // retrieving converted object for the current object
      result[obj.onelevel] = customConvert(obj.sublevels, result[obj.onelevel]);
    } else {
      result[obj.onelevel] = true;
    }
  }

  // return the result
  return result;
}

let objRequired = [{onelevel: 'first'}, { onelevel: 'second', sublevels: [ {onelevel: 'domain'}, {onelevel: 'subdomain'} ] }, { onelevel: 'third', sublevels: [ { onelevel: 'fourth', sublevels: [ {onelevel: 'domain'} ] } ] } ];

console.log(customConvert(objRequired));

Answer 6

Here is a special function customConvert that can help you achieve your desired output.

Utilizing the for (obj of currentObj) loop allows us to iterate through the values in the array and perform the necessary object conversions.

By using Object.keys(obj), we are able to retrieve an array containing all the keys present in the object. Additionally, the .includes method checks if the provided value exists within the array.

The customConvert function employs recursion, triggering a recursive call when a current array object contains sublevels.

function customConvert(currentObj) {
  // initializing result object
  let result = {};

  // iterating through array values
  for (obj of currentObj) {
    // checking for sublevels in obj. Recursively call if found.
    if (Object.keys(obj).includes("sublevels")) {
      // retrieving converted object for the current object
      result[obj.onelevel] = customConvert(obj.sublevels, result[obj.onelevel]);
    } else {
      result[obj.onelevel] = true;
    }
  }

  // return the result
  return result;
}

let objRequired = [{onelevel: 'first'}, { onelevel: 'second', sublevels: [ {onelevel: 'domain'}, {onelevel: 'subdomain'} ] }, { onelevel: 'third', sublevels: [ { onelevel: 'fourth', sublevels: [ {onelevel: 'domain'} ] } ] } ];

console.log(customConvert(objRequired));

Answer 7

Answer №4

Here's an alternative approach:

const requiredObjects = [...];

const customReducerFunction = (accumulator, currentObject) => {
  if (currentObject.propertyOne) {
    accumulator[currentObject.propertyOne] = currentObject.subProperties && currentObject.subProperties.length
      ? currentObject.subProperties.reduce(customReducerFunction, {})
      : true;
  }
  return accumulator;
};

// Obtaining the necessary object
requiredObjects = objNeeded.reduce(customReducerFunction, {});

Answer 8

Here's an alternative approach:

const requiredObjects = [...];

const customReducerFunction = (accumulator, currentObject) => {
  if (currentObject.propertyOne) {
    accumulator[currentObject.propertyOne] = currentObject.subProperties && currentObject.subProperties.length
      ? currentObject.subProperties.reduce(customReducerFunction, {})
      : true;
  }
  return accumulator;
};

// Obtaining the necessary object
requiredObjects = objNeeded.reduce(customReducerFunction, {});

Working with deeply nested objects in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The Google OAuth profile response is lacking the Profile ID - NextAuth

Fetching jQuery library via JavaScript

Troubleshooting problem with modifying Bootstrap button styling and hover effects

What is the best way to ensure that the bootstrap nav tab content fits perfectly on one line?

What is the best way to modify the state of a nested component?

The issue persists with multiple instances of Swiper js when trying to use append and prepend functions

Encountering a MODULE NOT FOUND error when using express.js

Incorporate content upon button click using Javascript

Using TypeScript with React and Material-UI: Issue with undefined theme in createStyles()

Conditionally typing in TypeScript to check if a string contains a specific value

Display information from an array in checkboxes. If the same data appears in another array, the corresponding checkbox in React will be automatically checked

Exploring into the subdirectory

The issue with the text not updating after upgrading to Vue 3 has not been

What is the best way to use a generic callback function as a specific argument?

Experiencing difficulties with $watch in my Angular controller

Postman is displaying [object object] as the return value, but the actual value is not

Is there a way to retrieve all the default CSS properties of the input checkbox tag using JavaScript?

Count up with HTML like a progressive jackpot's increasing value

showing a loading spinner while sending an ajax request, patiently awaiting the response, and preventing any further interactions on the page

Session is required for req.flash() function in node.js to work properly