Change an array of objects with parent child connections into a nested object structure

Question

Change an array of objects with parent child connections into a nested object structure

Imagine having a collection of objects with parent-child relationships like the one shown below:

[
  { A1: [ "B1" ] },
  { B1: [ "C11", "C12", "C13" ] },
  { C11: [ "D100", "D111", "D112", "D113", "D131" ] },
  { D100: [ "E1000", "E1100" ] }
]

How would you go about transforming the above array into a hierarchical object that accurately represents these relationships? The resulting object should look like this:

{
A1: 
{
    B1:
    {
        C11: 
        {
            D100: ["E1000", "E1100"],
            D111: [],
            D112: [],
            D113: [],
            D131: []
        },
        C12: [],
        C13: []
    }
}

}

I have attempted various recursive methods utilizing reduce, but I am still struggling to successfully convert all levels.

javascript arrays object nested

Answer 1

Answer №1

If you want to achieve the desired outcome through recursion, the following example may be a little clunky but gets the job done:

const array = [
  { A1: [ "B1" ] },
  { B1: [ "C11", "C12", "C13" ] },
  { C11: [ "D100", "D111", "D112", "D113", "D131" ] },
  { D100: [ "E1000", "E1100" ] }
]

// Creating an object structure

const result = array.reduce((prev, current) => {
  Object.entries(current).map(([key, value]) => {
    if (value) {
      prev[key] = {};
      value.map(el => prev[key][el] = {});
    }
  });
  return prev;
}, {})

// Loop to show relationships

Object.values(result).map(value => {
  if (Object.keys(value).length) {
    represent(value, result);
  }
})

function represent(value, obj) {
  Object.keys(value).map(key => {
    if (obj[key]) {
      value[key] = { ...obj[key] };
      delete(obj[key]);
      represent(value[key], obj);
    }
  })
}

// Converting and linking empty objects to arrays

associate(result);

function associate(obj) {
  Object.entries(obj).map(([key, value]) => {
    const values = Object.values(value).filter(o => Object.keys(o).length);
    if(values.length){
      associate(value)
    }else{
      if(Object.keys(value).length === 1) {
        obj[key] = [];
      }else {
        obj[key] = Object.keys(value);
      }
    }
  });
}

console.log(JSON.stringify(result, null, 2));

Answer 2

If you want to achieve the desired outcome through recursion, the following example may be a little clunky but gets the job done:

const array = [
  { A1: [ "B1" ] },
  { B1: [ "C11", "C12", "C13" ] },
  { C11: [ "D100", "D111", "D112", "D113", "D131" ] },
  { D100: [ "E1000", "E1100" ] }
]

// Creating an object structure

const result = array.reduce((prev, current) => {
  Object.entries(current).map(([key, value]) => {
    if (value) {
      prev[key] = {};
      value.map(el => prev[key][el] = {});
    }
  });
  return prev;
}, {})

// Loop to show relationships

Object.values(result).map(value => {
  if (Object.keys(value).length) {
    represent(value, result);
  }
})

function represent(value, obj) {
  Object.keys(value).map(key => {
    if (obj[key]) {
      value[key] = { ...obj[key] };
      delete(obj[key]);
      represent(value[key], obj);
    }
  })
}

// Converting and linking empty objects to arrays

associate(result);

function associate(obj) {
  Object.entries(obj).map(([key, value]) => {
    const values = Object.values(value).filter(o => Object.keys(o).length);
    if(values.length){
      associate(value)
    }else{
      if(Object.keys(value).length === 1) {
        obj[key] = [];
      }else {
        obj[key] = Object.keys(value);
      }
    }
  });
}

console.log(JSON.stringify(result, null, 2));

Answer 3

Answer №2

Suppose you have an object with a similar pattern, you can extract objects with references to other nested objects.

If you want to receive different values, such as arrays instead of objects, you can indicate this in the input data.

const
    data = [{ A1: ["B1"] }, { B1: ["C11", "C12", "C13"] }, { C11: ["D100", "D111", "D112", "D113", "D131"] }, { D100: ["E1000", "E1100"] }],
    result = data.reduce((r, o) => {
        Object
            .entries(o)
            .forEach(([k, a]) => a.forEach(l => (r[k] || r._)[l] ??= r[l] = {}));
        return r;
    }, { _: {} });

console.log(result._);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

Suppose you have an object with a similar pattern, you can extract objects with references to other nested objects.

If you want to receive different values, such as arrays instead of objects, you can indicate this in the input data.

const
    data = [{ A1: ["B1"] }, { B1: ["C11", "C12", "C13"] }, { C11: ["D100", "D111", "D112", "D113", "D131"] }, { D100: ["E1000", "E1100"] }],
    result = data.reduce((r, o) => {
        Object
            .entries(o)
            .forEach(([k, a]) => a.forEach(l => (r[k] || r._)[l] ??= r[l] = {}));
        return r;
    }, { _: {} });

console.log(result._);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Change an array of objects with parent child connections into a nested object structure

Answer №1

Answer №2

Similar questions

The Tooltip fails to display my content when hovered over for the first time, but it appears on the second attempt

Navigate the child div while scrolling within the parent div

Unraveling the Mystery of jQuery Syntax

Prevent certain dates from being selected in a designated input field

Using Three.js to Spin Cylinder Towards a Vector3 Destination

By employing timeUpdate in conjunction with currentTime

Creating an array of data from JSON using JavaScript and displaying it in a chart using ApexChart

Make sure to deactivate the submit button when the <textarea> field is empty, but remember to re-enable it once text is added

When using Express, some static files may display raw code instead of rendering the intended HTML content

Event for updating a cursor in Mongo/Meteor

Troubleshooting a malfunctioning custom filter in AngularJS

I'm so confused about the operation of each method in this context

Changing the image source using Javascript and extracting part of the URL

Tips for passing a URL variable into an Ajax script to prefill a form input in a search field

Customize your select element's background using jQuery when the content changes

React Hook Form is experiencing an excessive amount of re-renders which can lead to an infinite loop. React sets a limit on the number

Explore the routing capabilities of the HERE Maps JS API, including features for ABR and height

Having issues with FileReader and $scope.$watch in AngularJS?

Navigating to a particular div using a click event

Retrieving specific data from nested arrays in Vue.js