Javascript access deep child object by array of index numbers and assign new value

Question

const newFolders = [{name:'new1'},{name:'new2'}]
let folders = [
  {
    name: 'root',
    children:[
      {name:'folder1'},
      {
        name:'folder2',
        children:[
          {name: 'folder2.1'},
          {
            name: 'folder2.2',
            children: [
              {name:'target folder'}
            ]
          },
          {name: 'folder2.3'},
        ]
      },
      {name:'folder3'}
    ]
  }
]

// I don't want to use the below line to assign the newFolders variable to the target object
folders[0].children[1].children[1].children[0].children = newFolders;

// instead I have below
const child_index_map = [0,1,1,0]; // it should be any length for future access

// what I tried is (unsuccessful)
let temp = folders;
child_index_map.forEach((i, index)=>{
  temp = temp[i].children;
  if(index === child_index_map.length - 1){
    temp = newFolders;
  }
});
let folders = temp;

This is my folder structure and it should be any number of childrens.
I want to access the {name:'target folder'} object and assign newFolders to the object, but not the typical way like folders[0].children[1].children[1].children[0].children = newFolders;
instead of the above, I have index array const child_index_map = [0,1,1,0]

is there any possible way

Expected result

let folders = [
  {
    name: 'root',
    children:[
      {name:'folder1'},
      {
        name:'folder2',
        children:[
          {name: 'folder2.1'},
          {
            name: 'folder2.2',
            children: [
              {
                name:'target folder',
                children: [{name:'new1'},{name:'new2'}] // <--- this
              }
            ]
          },
          {name: 'folder2.3'},
        ]
      },
      {name:'folder3'}
    ]
  }
]

This might help: How can I access and process nested objects, arrays or JSON? — Felix Kling
– Felix Kling, Commented Jul 26, 2021 at 9:15

Nitheesh · Accepted Answer · 2021-07-26 09:20:33Z

1

There were some issues with the code in array.forEach area.

const newFolders = [{ name: 'new1' }, { name: 'new2' }]
let folders = [
  {
    name: 'root',
    children: [
      { name: 'folder1' },
      {
        name: 'folder2',
        children: [
          { name: 'folder2.1' },
          {
            name: 'folder2.2',
            children: [
              { name: 'target folder' }
            ]
          },
          { name: 'folder2.3' },
        ]
      },
      { name: 'folder3' }
    ]
  }
]

// I don't want to use the below line to assign the newFolders variable to the target object
// folders[0].children[1].children[1].children[0].children = newFolders;

// instead I have below
const child_index_map = [0, 1, 1, 0]; // it should be any length for future access
// what I tried is (unsuccessful) => Is successful now
let temp = folders;
child_index_map.forEach((i, index) => {
  temp = temp[i];
  if (index === child_index_map.length - 1) {
    temp.children = newFolders;
  }
  if (temp.children) {
    temp = temp.children;
  }
});
// There is no need to update your floders variable.
// folders = temp;
console.log(folders);

answered Jul 26, 2021 at 9:20

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manojkumar Over a year ago

You save my time @Nitheesh. works exactly what i want. Thank you so much.

Nitheesh Over a year ago

@Manojkumar you are welcome. Please approve the answer if this meets your requirement. Happy to have an upvot aswell.

Akshay · Accepted Answer · 2021-07-26 09:09:34Z

You can use a recursive function to find the folder and then modify it.

const newFolders = [{name:'new1'},{name:'new2'}]
let folders = [
  {
    name: 'root',
    children:[
      {name:'folder1'},
      {
        name:'folder2',
        children:[
          {name: 'folder2.1'},
          {
            name: 'folder2.2',
            children: [
              {name:'target folder'}
            ]
          },
          {name: 'folder2.3'},
        ]
      },
      {name:'folder3'}
    ]
  }
]

const child_index_map = [0,1,1,0];

const getParentFolder = (folders, childMap, currentIndex) => {
  if(currentIndex === childMap.length - 1) return folders;
  if(Array.isArray(folders)) return getParentFolder(folders[childMap[currentIndex]], childMap, currentIndex+1);
  
  return getParentFolder(folders.children[childMap[currentIndex]], childMap, currentIndex+1);
}

const parentFolder = getParentFolder(folders, child_index_map, 0);
parentFolder.children = newFolders;

console.log(folders)

muhammed ikinci · Accepted Answer · 2021-07-26 09:42:12Z

You can change the attachFolderName variable what you want.

let folders = [
  {
    name: 'root',
    children:[
      {name:'folder1'},
      {
        name:'folder2',
        children:[
          {name: 'folder2.1'},
          {
            name: 'folder2.2',
            children: [
              {
                name:'target folder',
                children: [{name:'new1'},{name:'new2'}] // <--- this
              }
            ]
          },
          {name: 'folder2.3'},
        ]
      },
      {name:'folder3'}
    ]
  }
]

let findAndAdd = (data, obj, search) => {
    function recursiveSearch (child) {
        if (child.children) {
            let filtered = child.children.find((f) => {
                return f.name === search
            })

            if (filtered) {
                if (!filtered.children)
                    filtered.children = [obj]
                else
                    filtered.children.push(obj)
                
                return;
            }

            child.children.forEach((c) => {
                recursiveSearch(c)
            })
        }
    }

    recursiveSearch(data[0])
}

let attachFolderName = "target folder"

findAndAdd(folders, {name: "new test with recursive"}, attachFolderName)

console.log(folders)

Collectives™ on Stack Overflow

Javascript access deep child object by array of index numbers and assign new value

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related