What is the best way to interweave my objects within this tree using recursion?

Question

What is the best way to interweave my objects within this tree using recursion?

I am working on creating a new function called customAdd() that will build a nested tree structure like the one shown below:

 let obj = []

let obj1 = {
    key: "detail1Tests",
    id: "94d3d1a2c3d8c4e1d77011a7162a23576e7d8a30d6beeabfadcee5df0876bb0e"
}

let obj2 = {key: "detail1Tests.detail2Tests", id: "5b091b37a9efc9d0567a4beac0bb20fcdf9796f4b71e239da6ac0c53e3488838"}

let obj3 = {key: "detail1Tests.detail2Tests.detail3Tests", id: "0b60c29d6e309be95ef33b0ad137623c5712a9a47613ce5e561871001c71bd3b"}

let result = this.customAdd(obj, obj1);
console.log(result);

let result1 = this.customAdd(result, obj2);
console.log(result1);

let result2 = this.customAdd(result1, obj3);
console.log(result2);
};

The expected output for 'result' should be:

 children: {
    detail1Tests: [{
            id: " 94d3d1a2c3d8c4e1d77011a7162a23576e7d8a30d6beeabfadcee5df0876bb0e "
        }]

'result1' should look like this:

 children: {
    detail1Tests: [{
            id: " 94d3d1a2c3d8c4e1d77011a7162a23576e7d8a30d6beeabfadcee5df0876bb0e "
            children: {
                detail1Tests.detail2Tests: [{
                        id: "5b091b37a9efc9d0567a4beac0bb20fcdf9796f4b71e239da6ac0c53e3488838"
                    }
                ]
            }
        }]

Finally, 'result2' should resemble:

 children: {
    detail1Tests: [{
            id: " 94d3d1a2c3d8c4e1d77011a7162a23576e7d8a30d6beeabfadcee5df0876bb0e "
            children: {
                detail1Tests.detail2Tests: [{
                        id: "5b091b37a9efc9d0567a4beac0bb20fcdf9796f4b71e239da6ac0c53e3488838"
                        children: {
                            detail1Tests.detail2Tests.detail3Tests: [{
                                    id: "0b60c29d6e309be95ef33b0ad137623c5712a9a47613ce5e561871001c71bd3b"
                                }
                            ]
                        }
                    }
                ]
            }
        }]

As you can see, the function I've built only works on the first level of nesting. If you have any suggestions on how to extend it to deeper levels, please let me know.

 customAdd(obj, subObj){
    let obj2 = {children: {[subObj.key]: [{id: subObj.id}] }}
    if(obj.children){
        let obj3 = obj.children;
        var kyz = Object.keys(obj3);
        let obj4 = obj3[kyz[0]]
        this.customAdd(obj4, subObj)
    }
    else {
        return {...obj,...obj2};
    }
}

Any insights on how to achieve deeper nesting are welcome.

javascript angular typescript recursion tree

Answer 1

Answer №1

It seems like you're looking to develop a utility function similar to lodash's 'set' or ramda's 'assocPath'

https://lodash.com/docs/4.17.15#set

Answer 2

It seems like you're looking to develop a utility function similar to lodash's 'set' or ramda's 'assocPath'

https://lodash.com/docs/4.17.15#set

Answer 3

Answer №2

There were some issues with the customAdd() function and it required certain modifications to achieve its intended goal. Here is the updated version:

customAdd(obj , subObj){
    
    if(obj.children){
      let obj3 = obj.children;
     var kyz = Object.keys(obj3);
     let obj4 = obj3[kyz[0]]
    return  this.customAdd(obj4[0] , subObj)
    }
    else {
      obj.children=obj2.children;
      return ;
    }
   
  }

It's important to note that the object passed to this function will be altered. To preserve the original object and store results independently, a deep copy of the object can be created using the following syntax:

let result = JSON.parse(JSON.stringify(obj));

With this in mind, the code would look like this:

this.customAdd(obj, obj1);
  var result = JSON.parse(JSON.stringify(obj));
  console.log(result);  

  this.customAdd(obj, obj2);
  var result1 = JSON.parse(JSON.stringify(obj));;
  console.log(result1);

  this.customAdd(obj,obj3);
  var result2 = JSON.parse(JSON.stringify(obj));;
  console.log(result2);

Answer 4

There were some issues with the customAdd() function and it required certain modifications to achieve its intended goal. Here is the updated version:

customAdd(obj , subObj){
    
    if(obj.children){
      let obj3 = obj.children;
     var kyz = Object.keys(obj3);
     let obj4 = obj3[kyz[0]]
    return  this.customAdd(obj4[0] , subObj)
    }
    else {
      obj.children=obj2.children;
      return ;
    }
   
  }

It's important to note that the object passed to this function will be altered. To preserve the original object and store results independently, a deep copy of the object can be created using the following syntax:

let result = JSON.parse(JSON.stringify(obj));

With this in mind, the code would look like this:

this.customAdd(obj, obj1);
  var result = JSON.parse(JSON.stringify(obj));
  console.log(result);  

  this.customAdd(obj, obj2);
  var result1 = JSON.parse(JSON.stringify(obj));;
  console.log(result1);

  this.customAdd(obj,obj3);
  var result2 = JSON.parse(JSON.stringify(obj));;
  console.log(result2);

Answer 5

Answer №3

As per the suggestion of designreact, an alternative approach could be implemented using Ramda's assocPath function (or a similar one from lodash).

const customAdd = ({key, ...rest}, o) =>
  assocPath (key .split ('.') .flatMap (k => ['children', k, 0]), rest, o)


let obj1 =  {
  key: "detail1Tests",
  id : "94d3d1a2c3d8c4e1d77011a7162a23576e7d8a30d6beeabfadcee5df0876bb0e"
}

let obj2 = {
  key: "detail1Tests.detail2Tests",
  id: "5b091b37a9efc9d0567a4beac0bb20fcdf9796f4b71e239da6ac0c53e3488838"}

let obj3 = {
  key: "detail1Tests.detail2Tests.detail3Tests",
  id: "0b60c29d6e309be95ef33b0ad137623c5712a9a47613ce5e561871001c71bd3b"
}


const results1 = customAdd (obj1, {})
const results2 = customAdd (obj2, results1)
const results3 = customAdd (obj3, results2)

console .log (results1)
console .log (results2)
console .log (results3)

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

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.js"></script>
<script> const {assocPath} = R </script>

The process involves dividing the key into segments, where each segment is prefixed with "children" and suffixed with 0. For example,

"detail1Tests.detail2Tests"

transforms into

["children", "detail1Tests", 0, "children", "detail2Tests", 0]

, which matches the structure required by Ramda's assocPath method.

However, incorporating Ramda solely for this purpose may be unnecessary. A custom version of assocPath can be created easily by leveraging another function inspired by Ramda called assoc. The two functions combined would look like this:

const assoc = (p, v, o) => 
  Number .isInteger (p) && Array .isArray (o)
    ? [... o .slice (0, p), v, ... o .slice (p + 1)]
    : {... o, [p]: v}

const assocPath  = ([p, ... ps], v, o) => 
  p == undefined
    ? o
    : ps.length == 0
      ? assoc (p, v, o)
      : assoc (p, assocPath (ps, v, o [p] || (o [p] = Number.isInteger (ps [0]) ? [] : {})), o)

I recommend reconsidering the output structure unless it is necessary to align with an external system. The current format might not be efficient or intuitive for your use case. An improved structure could resemble:

{
    detail1Tests: {
        id: "94d3d1a2c3d8c4e1d77011a7162a23576e7d8a30d6beeabfadcee5df0876bb0e",
        detail2Tests: {
            id: "5b091b37a9efc9d0567a4beac0bb20fcdf9796f4b71e239da6ac0c53e3488838",
            detail3Tests: {
                id: "0b60c29d6e309be95ef33b0ad137623c5712a9a47613ce5e561871001c71bd3b"
            }
        }
    }
}

This structure can be easily achieved with the following code:

const customAdd = ({key, ...rest}, o) =>
  assocPath (key .split ('.'), rest, o)

If you prefer retaining the "children" node in each segment, you can consider a format like:

{
    children: {
        detail1Tests: {
            id: "94d3d1a2c3d8c4e1d77011a7162a23576e7d8a30d6beeabfadcee5df0876bb0e"
            children: {
                detail2Tests: {
                    id: "5b091b37a9efc9d0567a4beac0bb20fcdf9796f4b71e239da6ac0c53e3488838",
                    children: {
                        detail3Tests: {
                            id: "0b60c29d6e309be95ef33b0ad137623c5712a9a47613ce5e561871001c71bd3b"
                        }
                    }
                }
            }
        }
    }
}

Incorporate the following code to achieve this desired structure:

const customAdd = ({key, ...rest}, o) =>
  assocPath (key .split ('.') .flatMap (k => ['children', k]), rest, o)

The additional array layer in this nested format may not provide significant benefits and can be omitted if deemed unnecessary.

Answer 6

As per the suggestion of designreact, an alternative approach could be implemented using Ramda's assocPath function (or a similar one from lodash).

const customAdd = ({key, ...rest}, o) =>
  assocPath (key .split ('.') .flatMap (k => ['children', k, 0]), rest, o)


let obj1 =  {
  key: "detail1Tests",
  id : "94d3d1a2c3d8c4e1d77011a7162a23576e7d8a30d6beeabfadcee5df0876bb0e"
}

let obj2 = {
  key: "detail1Tests.detail2Tests",
  id: "5b091b37a9efc9d0567a4beac0bb20fcdf9796f4b71e239da6ac0c53e3488838"}

let obj3 = {
  key: "detail1Tests.detail2Tests.detail3Tests",
  id: "0b60c29d6e309be95ef33b0ad137623c5712a9a47613ce5e561871001c71bd3b"
}


const results1 = customAdd (obj1, {})
const results2 = customAdd (obj2, results1)
const results3 = customAdd (obj3, results2)

console .log (results1)
console .log (results2)
console .log (results3)

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

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.js"></script>
<script> const {assocPath} = R </script>

The process involves dividing the key into segments, where each segment is prefixed with "children" and suffixed with 0. For example,

"detail1Tests.detail2Tests"

transforms into

["children", "detail1Tests", 0, "children", "detail2Tests", 0]

, which matches the structure required by Ramda's assocPath method.

However, incorporating Ramda solely for this purpose may be unnecessary. A custom version of assocPath can be created easily by leveraging another function inspired by Ramda called assoc. The two functions combined would look like this:

const assoc = (p, v, o) => 
  Number .isInteger (p) && Array .isArray (o)
    ? [... o .slice (0, p), v, ... o .slice (p + 1)]
    : {... o, [p]: v}

const assocPath  = ([p, ... ps], v, o) => 
  p == undefined
    ? o
    : ps.length == 0
      ? assoc (p, v, o)
      : assoc (p, assocPath (ps, v, o [p] || (o [p] = Number.isInteger (ps [0]) ? [] : {})), o)

I recommend reconsidering the output structure unless it is necessary to align with an external system. The current format might not be efficient or intuitive for your use case. An improved structure could resemble:

{
    detail1Tests: {
        id: "94d3d1a2c3d8c4e1d77011a7162a23576e7d8a30d6beeabfadcee5df0876bb0e",
        detail2Tests: {
            id: "5b091b37a9efc9d0567a4beac0bb20fcdf9796f4b71e239da6ac0c53e3488838",
            detail3Tests: {
                id: "0b60c29d6e309be95ef33b0ad137623c5712a9a47613ce5e561871001c71bd3b"
            }
        }
    }
}

This structure can be easily achieved with the following code:

const customAdd = ({key, ...rest}, o) =>
  assocPath (key .split ('.'), rest, o)

If you prefer retaining the "children" node in each segment, you can consider a format like:

{
    children: {
        detail1Tests: {
            id: "94d3d1a2c3d8c4e1d77011a7162a23576e7d8a30d6beeabfadcee5df0876bb0e"
            children: {
                detail2Tests: {
                    id: "5b091b37a9efc9d0567a4beac0bb20fcdf9796f4b71e239da6ac0c53e3488838",
                    children: {
                        detail3Tests: {
                            id: "0b60c29d6e309be95ef33b0ad137623c5712a9a47613ce5e561871001c71bd3b"
                        }
                    }
                }
            }
        }
    }
}

Incorporate the following code to achieve this desired structure:

const customAdd = ({key, ...rest}, o) =>
  assocPath (key .split ('.') .flatMap (k => ['children', k]), rest, o)

The additional array layer in this nested format may not provide significant benefits and can be omitted if deemed unnecessary.

What is the best way to interweave my objects within this tree using recursion?

Answer №1

Answer №2

Answer №3

Similar questions

React Big Calendar encountered an error: The element type provided is not valid, as it is expected to be a string for built-in

JWT authentication for restricted routes

How to drop several pins on Google Maps with JavaScript

Implementing chance.js in an Angular 4.x Component's ngOnInit() Method

Is there a way to manipulate my csv values so that they all appear in a single column?

Switch up the CSS file based on the URL route

Attaching an event listener to elements with a specified Class name

Utilize socket communication with node.js to monitor and identify user

'ng build' operation halted - Angular

The Ionic and Angular application solely displays dynamic HTML with no encapsulation using ViewEncapsulation.None

What methods are most effective when utilizing imports to bring in components?

I'm sorry, but we were unable to locate the /bin/sh

Using the spread operator in a component's render function could potentially lead to an endless update loop

Is it possible to utilize Angular validation directives programmatically within a personalized directive?

What is the proper way to specify the type for a proxy that encapsulates a third-party class?

What is the process for calculating and determining the exact area the div should be released?

Encountering a JavaScript problem in Google Chrome?

ES6 Conditional Import and Export: Leveraging the Power of Conditional

Discovering an Element in jQuery through its ID using Spaces and Variables

Utilizing the reduce method to transform an array containing nested arrays into a different structure