How can I get a new copy of an array of objects whose nested elements can grow indefinitely?-CodePudding

I am working with an array of objects that originally looks like this

const data = [
    {
        data: 1,
        children: [],
    },
    {
        data: 2,
        children: [],
    },
];

Eventually, these objects can grow indefinitely by filling the children's property with objects that share the shape of the original objects. For example

const data = [
    {
        data: 1,
        children: [
          {
              data: 3,
              children: [],
          },
          {
              data: 4,
              children: [],
          }
        ],
    },
    {
        data: 2,
        children: [],
    },
];

I need that when getting new data like this

[
    { data: 10, children: [] },
    { data: 12, children: [] },
]

and that must be placed in, for example, the children property of the object with the data property with value 4. How can I replace the entire array with the new values? As I mentioned before, nested objects can grow by filling the children's property indefinitely?

const data = [
    {
        data: 1,
        children: [
          {
              data: 3,
              children: [],
          },
          {
              data: 4,
              children: [
                  { data: 10, children: [] },
                  { data: 12, children: [] },
              ],
          }
        ],
    },
    {
        data: 2,
        children: [],
    },
];

Update 0: I need a new copy of the array with its updated objects because I work in angular and for a node tree component to be updated I need a new copy of values

CodePudding user response：

You can parse it using JSON (it won't catch functions though)

const data = [
    { data: 10, children: [] },
    { data: 12, children: [] },
];

const newObj = JSON.parse(JSON.stringify(data));

newObj[0].data = 15;
console.log(newObj[0].data); // 15
console.log(data[0].data); // 10

Or you can use lodash cloneDeep

CodePudding user response：

You can have recursion to find data match and update children accordingly

const newData = [
    { data: 10, children: [] },
    { data: 12, children: [] },
]

const data = [
    {
        data: 1,
        children: [
          {
              data: 3,
              children: [],
          },
          {
              data: 4,
              children: [],
          }
        ],
    },
    {
        data: 2,
        children: [],
    },
];

function updateData(currentData, newData, dataValue) {
   if(currentData && Array.isArray(currentData) && currentData.length > 0) {
      for(let item of currentData) {
         //found item.data === 4
         if(item.data === dataValue) {
            //update children with your new data
            item.children = newData;
            break;
         }
         updateData(item.children, newData, dataValue)
      }
   }
}

//clone your data here
const clonedData = JSON.parse(JSON.stringify(data))

updateData(clonedData, newData, 4)

console.log({clonedData})
console.log("===========")
console.log({data})

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