Transform a hierarchical array data structure into a one-dimensional array structure

Question

Transform a hierarchical array data structure into a one-dimensional array structure

Seeking a solution to transform this array of nested objects into a flat array for easier manipulation.

[
  {
    "name": "bill",
    "car": "jaguar",
    "age": 30,
    "profiles": [
      {
        "name": "stacey",
        "car": "lambo",
        "age": 23,
        "profiles": [
          {
            "name": "martin",
            "car": "lexus",
            "age": 34,
            "profiles": []
          }
        ]
      }
    ]
  }
]

The desired result is shown below:

[
  {
    "name": "bill",
    "car": "jaguar",
    "age": 30,
  },{
    "name": "stacey",
    "car": "lambo",
    "age": 23,
  },{
    "name": "martin",
    "car": "lexus",
    "age": 34,
  }
]

Each profiles array can have any number of items, some possibly with empty subarrays of profiles. The converted objects in the array do not include the profiles after transformation.

Considering the use of either underscore or lodash libraries to accomplish this task.

javascript arrays recursion underscore.js lodash

Answer 1

Answer №1

Let's define the original data as o. By combining the power of Array.prototype.reduce with recursion, I have devised the following solution:

o.reduce(function recur(accumulator, curr) {
   var keys = Object.keys(curr);
   keys.splice(keys.indexOf('profiles'), 1);

   accumulator.push(keys.reduce(function (entry, key) {
       entry[key] = curr[key];
       return entry;
   }, {}));

   if (curr.profiles.length > 0) {
       return accumulator.concat(curr.profiles.reduce(recur, []));
   }

   return accumulator;
}, []);

Answer 2

Let's define the original data as o. By combining the power of Array.prototype.reduce with recursion, I have devised the following solution:

o.reduce(function recur(accumulator, curr) {
   var keys = Object.keys(curr);
   keys.splice(keys.indexOf('profiles'), 1);

   accumulator.push(keys.reduce(function (entry, key) {
       entry[key] = curr[key];
       return entry;
   }, {}));

   if (curr.profiles.length > 0) {
       return accumulator.concat(curr.profiles.reduce(recur, []));
   }

   return accumulator;
}, []);

Answer 3

Answer №2

To avoid relying on global variables, I would implement a recursive function that takes the resulting array as a parameter. Here is an example of how this can be done:

var output = [];

function extractData(input, output) {
    for (var j=0; j<input.length; j++) {
        var newData = {
            name: input[j].name,
            car: input[j].car,
            age: input[j].age
        };
        output.push(newData);
        
        if (input[j].profiles instanceof Array &&
            input[j].profiles.length>0)
            extractData(input[j].profiles, output);
    }
}

console.log(output); // displays the elements in a readable format

Please note that this code has not been tested thoroughly, so it is recommended to use it as a reference only.

(edit1: Corrected variable declaration in for loop)

Answer 4

To avoid relying on global variables, I would implement a recursive function that takes the resulting array as a parameter. Here is an example of how this can be done:

var output = [];

function extractData(input, output) {
    for (var j=0; j<input.length; j++) {
        var newData = {
            name: input[j].name,
            car: input[j].car,
            age: input[j].age
        };
        output.push(newData);
        
        if (input[j].profiles instanceof Array &&
            input[j].profiles.length>0)
            extractData(input[j].profiles, output);
    }
}

console.log(output); // displays the elements in a readable format

Please note that this code has not been tested thoroughly, so it is recommended to use it as a reference only.

(edit1: Corrected variable declaration in for loop)

Answer 5

Answer №3

const _ = require('lodash')

const extractArrayFromObject = (inputObj, inputArr) => {
  const {data, ...others} = inputObj
  if (!_.isEmpty(inputObj.data)) {
    return extractArrayFromObject(inputObj.data!, [...inputArr, others])
  }
  return [...inputArr, others]
}

const flattenedArray = extractArrayFromObject(myRecursiveData, [])

Answer 6

const _ = require('lodash')

const extractArrayFromObject = (inputObj, inputArr) => {
  const {data, ...others} = inputObj
  if (!_.isEmpty(inputObj.data)) {
    return extractArrayFromObject(inputObj.data!, [...inputArr, others])
  }
  return [...inputArr, others]
}

const flattenedArray = extractArrayFromObject(myRecursiveData, [])

Answer 7

Answer №4

Hey there! Give this a shot...

    let result = [];
    let index = 0;

    const extractData = (source, output) => {
        if(source[0] == null){
            index = output.length - 1;
            return false;
        } else { 
          output.push(source[0]);
        }
        extractData(source[0].profiles, output);
        delete output[index--].profiles;
    };

    extractData(inputArray, result); // here 'inputArray' is the input array and 'result' is the output
    console.log(result);

Good luck!

Answer 8

Hey there! Give this a shot...

    let result = [];
    let index = 0;

    const extractData = (source, output) => {
        if(source[0] == null){
            index = output.length - 1;
            return false;
        } else { 
          output.push(source[0]);
        }
        extractData(source[0].profiles, output);
        delete output[index--].profiles;
    };

    extractData(inputArray, result); // here 'inputArray' is the input array and 'result' is the output
    console.log(result);

Good luck!

Answer 9

Answer №5

var _ = require('lodash')
/**
 * This function flattens an array object by extracting recursive properties.
 * @see {@link http://example.com/handle-recursive-properties}
 * @param  {Array} arr                The array of objects with recursive properties
 * @param  {String} recursiveProperty The name of the recursive property
 * @return {Array}                    A flat array containing all recursive properties without the specified recursive property
 */
function extractRecursiveProperties (arr, recursiveProperty) {
  var extracted = []
  function _extractRecursive (children) {
    _.each(children, function (item) {
      if (item[recursiveProperty] && item[recursiveProperty].length) _extractRecursive(item[recursiveProperty])
      extracted.push(_.omit(item, recursiveProperty))
    })
  }
  _extractRecursive(arr)
  return extracted
}

module.exports = extractRecursiveProperties

Answer 10

var _ = require('lodash')
/**
 * This function flattens an array object by extracting recursive properties.
 * @see {@link http://example.com/handle-recursive-properties}
 * @param  {Array} arr                The array of objects with recursive properties
 * @param  {String} recursiveProperty The name of the recursive property
 * @return {Array}                    A flat array containing all recursive properties without the specified recursive property
 */
function extractRecursiveProperties (arr, recursiveProperty) {
  var extracted = []
  function _extractRecursive (children) {
    _.each(children, function (item) {
      if (item[recursiveProperty] && item[recursiveProperty].length) _extractRecursive(item[recursiveProperty])
      extracted.push(_.omit(item, recursiveProperty))
    })
  }
  _extractRecursive(arr)
  return extracted
}

module.exports = extractRecursiveProperties

Answer 11

Answer №6

It has been nearly three years and the search for a one-size-fits-all solution continues. Taking inspiration from @axelduch's response, here is a heavily influenced approach.

const {isPlainObject, isArray, get, omit, reduce} = require('lodash')
const recursiveFlatten = (tree, headProp, parentIdProp, parentRefProp, parent = {}) => {
  tree = isArray(tree) ? tree : [tree]
  return reduce(tree, (acq, current) => {
    const currentWithoutHead = omit(current, [headProp])
    if (parentIdProp && parentRefProp) currentWithoutHead[parentRefProp] = parent[parentIdProp] || null
    acq = [...acq, currentWithoutHead]
    const next = get(current, headProp)
    if (isPlainObject(next) || isArray(next)) {
      parent = currentWithoutHead
      acq = [...acq, ...recursiveFlatten(next, headProp, parentIdProp, parentRefProp, parent)]
    }
    return acq
  }, [])
}

Let's consider a basic example:

const example = recursiveFlatten({
  name: 'bill',
  love: true,
  lovers: [{
    name: 'jil',
    love: false,
    lovers: [{
      name: 'diana',
      love: false,
      lovers: false
    }, {
      name: 'einstein',
      love: false,
      lovers: {
        name: 'carl sagan',
        love: false,
        lovers: false
      }
    }]
  }]
}, 'lovers')

[ { name: 'bill', love: true },
  { name: 'jil', love: false },
  { name: 'diana', love: false },
  { name: 'einstein', love: false },
  { name: 'carl sagan', love: false } ]

Now, let's enhance the example by adding a parentId property using parentRef.

const example = recursiveFlatten({
  name: 'bill',
  love: true,
  lovers: [{
    name: 'jil',
    love: false,
    lovers: [{
      name: 'diana',
      love: false,
      lovers: false
    }, {
      name: 'einstein',
      love: false,
      lovers: {
        name: 'carl sagan',
        love: false,
        lovers: false
      }
    }]
  }]
}, 'lovers', 'name', 'parentName')

[ { name: 'bill', love: true, parentName: null },
  { name: 'jil', love: false, parentName: 'bill' },
  { name: 'diana', love: false, parentName: 'jil' },
  { name: 'einstein', love: false, parentName: 'jil' },
  { name: 'carl sagan', love: false, parentName: 'einstein' } ]

Answer 12

It has been nearly three years and the search for a one-size-fits-all solution continues. Taking inspiration from @axelduch's response, here is a heavily influenced approach.

const {isPlainObject, isArray, get, omit, reduce} = require('lodash')
const recursiveFlatten = (tree, headProp, parentIdProp, parentRefProp, parent = {}) => {
  tree = isArray(tree) ? tree : [tree]
  return reduce(tree, (acq, current) => {
    const currentWithoutHead = omit(current, [headProp])
    if (parentIdProp && parentRefProp) currentWithoutHead[parentRefProp] = parent[parentIdProp] || null
    acq = [...acq, currentWithoutHead]
    const next = get(current, headProp)
    if (isPlainObject(next) || isArray(next)) {
      parent = currentWithoutHead
      acq = [...acq, ...recursiveFlatten(next, headProp, parentIdProp, parentRefProp, parent)]
    }
    return acq
  }, [])
}

Let's consider a basic example:

const example = recursiveFlatten({
  name: 'bill',
  love: true,
  lovers: [{
    name: 'jil',
    love: false,
    lovers: [{
      name: 'diana',
      love: false,
      lovers: false
    }, {
      name: 'einstein',
      love: false,
      lovers: {
        name: 'carl sagan',
        love: false,
        lovers: false
      }
    }]
  }]
}, 'lovers')

[ { name: 'bill', love: true },
  { name: 'jil', love: false },
  { name: 'diana', love: false },
  { name: 'einstein', love: false },
  { name: 'carl sagan', love: false } ]

Now, let's enhance the example by adding a parentId property using parentRef.

const example = recursiveFlatten({
  name: 'bill',
  love: true,
  lovers: [{
    name: 'jil',
    love: false,
    lovers: [{
      name: 'diana',
      love: false,
      lovers: false
    }, {
      name: 'einstein',
      love: false,
      lovers: {
        name: 'carl sagan',
        love: false,
        lovers: false
      }
    }]
  }]
}, 'lovers', 'name', 'parentName')

[ { name: 'bill', love: true, parentName: null },
  { name: 'jil', love: false, parentName: 'bill' },
  { name: 'diana', love: false, parentName: 'jil' },
  { name: 'einstein', love: false, parentName: 'jil' },
  { name: 'carl sagan', love: false, parentName: 'einstein' } ]

Answer 13

Answer №7

Here is a straightforward method that can address the issue as initially described.

const flattenRecursive = (tree) => 
  tree.length == 0
    ? []
    : tree.flatMap(({profiles = [], ...rest}) => [{...rest}, ...flattenRecursive(profiles)])

const treeData = [{name: "bill", car: "jaguar", age: 30, profiles: [{name: "stacey", car: "lambo", age: 23, profiles: [{name: "martin", car: "lexus", age: 34, profiles: []}]}]}, {name: "denise", car: "pinto", age: 28}]

console.log(
  flattenRecursive(treeData)
)

This code snippet specifically targets the property 'profiles' and eliminates it while retaining the other properties in the new object.

Your solution appears to have more intricate requirements. This version accommodates these through multiple optional parameters, similar to your proposed solution, although the invocation process differs here and could be adjusted if needed:

const flattenRecursive = (headProperty, parentIdProperty, parentReferenceProperty, parent = {}) => (tree) => 
  tree.length == 0
    ? []
    : tree.flatMap(({[headProperty]: children = [], ...rest}) => [
        {
          ...rest,
          ...(parentIdProperty && parentReferenceProperty ? {[parentReferenceProperty]: parent[parentIdProperty] || null} : {})
        },
        ...flattenRecursive(headProperty, parentIdProperty, parentReferenceProperty, rest)(children)
      ])
    

const dataTree = [{name: "bill", car: "jaguar", age: 30, profiles: [{name: "stacey", car: "lambo", age: 23, profiles: [{name: "martin", car: "lexus", age: 34, profiles: []}]}]}, {name: "denise", car: "pinto", age: 28}]

console.log(flattenRecursive('profiles')(dataTree))
console.log(flattenRecursive('profiles', 'name', 'parentName')(dataTree))

I might not prefer this particular API structure in my own projects due to the complexity introduced by the varying behaviors based on the number of passed arguments. I would consider encapsulating them within an API like

const flattenRecursive = (parentIdProperty, parentReferenceProperty) => (headProperty) => (tree) => ...

After which we could use specific functions such as

const flatProfiles = flattenRecursive(null, null)('profiles')

and

const flatAndExpand = flattenRecursive('name', 'parentName')('profiles')

to replace the two function calls within the console.log() statements above.

Answer 14

Here is a straightforward method that can address the issue as initially described.

const flattenRecursive = (tree) => 
  tree.length == 0
    ? []
    : tree.flatMap(({profiles = [], ...rest}) => [{...rest}, ...flattenRecursive(profiles)])

const treeData = [{name: "bill", car: "jaguar", age: 30, profiles: [{name: "stacey", car: "lambo", age: 23, profiles: [{name: "martin", car: "lexus", age: 34, profiles: []}]}]}, {name: "denise", car: "pinto", age: 28}]

console.log(
  flattenRecursive(treeData)
)

This code snippet specifically targets the property 'profiles' and eliminates it while retaining the other properties in the new object.

Your solution appears to have more intricate requirements. This version accommodates these through multiple optional parameters, similar to your proposed solution, although the invocation process differs here and could be adjusted if needed:

const flattenRecursive = (headProperty, parentIdProperty, parentReferenceProperty, parent = {}) => (tree) => 
  tree.length == 0
    ? []
    : tree.flatMap(({[headProperty]: children = [], ...rest}) => [
        {
          ...rest,
          ...(parentIdProperty && parentReferenceProperty ? {[parentReferenceProperty]: parent[parentIdProperty] || null} : {})
        },
        ...flattenRecursive(headProperty, parentIdProperty, parentReferenceProperty, rest)(children)
      ])
    

const dataTree = [{name: "bill", car: "jaguar", age: 30, profiles: [{name: "stacey", car: "lambo", age: 23, profiles: [{name: "martin", car: "lexus", age: 34, profiles: []}]}]}, {name: "denise", car: "pinto", age: 28}]

console.log(flattenRecursive('profiles')(dataTree))
console.log(flattenRecursive('profiles', 'name', 'parentName')(dataTree))

I might not prefer this particular API structure in my own projects due to the complexity introduced by the varying behaviors based on the number of passed arguments. I would consider encapsulating them within an API like

const flattenRecursive = (parentIdProperty, parentReferenceProperty) => (headProperty) => (tree) => ...

After which we could use specific functions such as

const flatProfiles = flattenRecursive(null, null)('profiles')

and

const flatAndExpand = flattenRecursive('name', 'parentName')('profiles')

to replace the two function calls within the console.log() statements above.

Transform a hierarchical array data structure into a one-dimensional array structure

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Switching visual representation that appears upon clicking the dropdown menu

Struggling with navigating through MongoDB's ObjectId using Cypress

Display the output based on checkbox selection using JavaScript

How to Handle a TypeError When Deleting a File Using GridFS with Mongoose and Node.js

What is the best way to display a 'confirmed' message on my registration page once a user has submitted their information?

What is the best method to transfer text entered in one textarea to the output of another?

Send the appropriate data once the response has been completed

How can I ensure a mock is resolved before rendering in React with Jest?

Guide on integrating cookiejar with HTTP2

What is the process for running child_process when a user clicks on a view in an application

Tips on incorporating variable tension feature into D3 hierarchical edge bundling

What is the best method to determine the accurate height of a window that works across all browsers and platforms?

Having trouble with SCSS in Angular 4 CLI after adding new CSS styles?

Utilizing a flat array to retrieve information from a multidimensional array

Verifying whether an ng-repeat returns an empty set following a filter operation

The template failed to load on AngularJS post-compilation

Typescript is throwing an error stating that the type 'Promise<void>' cannot be assigned to the type 'void | Destructor'

Do PHP arrays get duplicated as values or as references when assigned to new variables and when they are passed to functions?

Using relative paths to showcase images in Node.js

Organizing controllers in separate files within AngularJS