How to loop through an array of objects and add a new field using react and javascript?

Question

i want to loop through array of objects and check for a particular property and add a new property "disabled" to the array.

below is the array of objects

const arr_obj = [
    {
        id: "1",
        name: "name1",
        type: "type2",
        children: [
            {
                id: "2",
                name: "name2",
                type: "type4",
                children: [
                    {
                        id: "3",
                        name: "name3",
                        type: "type5",
                    },
             },
             {     
                  id: "4",
                  name: "name4",
                  type: "type3",
                  children: [
                      {
                           id: "5",
                           name: "name5",
                           type: "type4",
                           children: [],
                       },
                   ],
               },
              
                   id: "6",
                   name: "name6",
                   type: "type3",
                   children: [
                       {
                           id: "7",
                           name: "name7",
                           type: "type4",
                           children: [],
                       },
                    ],
                }
            },
            .....//similar objects
        ];

so from above array of objects i want to check for each object if type === type2 and if type2 then add property disabled: false if not disabled: true.

below is what i have tried

const new_obj = React.useMemo(() => {
    return arr_obj.map((arr) => ({
        ...arr,
        disabled: arr?.type !== "type2" ? true : false,
    }));
}, [arr_obj]);

this adds disabled property only to outer object it doesnt add to children object.

output with above snippet is like below,

 const new_arr = [
    {
        id: "1",
        name: "name1",
        type: "type2",
        disabled: false,
        children: [
            {
                id: "2",
                name: "name2",
                type: "type4",
                children: [
                    {
                        id: "3",
                        name: "name3",
                        type: "type5",
                    },
             },
             {     
                  id: "4",
                  name: "name4",
                  type: "type3",
                  children: [
                      {
                           id: "5",
                           name: "name5",
                           type: "type4",
                           children: [],
                       },
                   ],
               },
              
                   id: "6",
                   name: "name6",
                   type: "type3",
                   children: [
                       {
                           id: "7",
                           name: "name7",
                           type: "type4",
                           children: [],
                       },
                    ],
                }
            },
            .....//similar objects
        ];

expected output is like below,

const new_arr = [
    {
        id: "1",
        name: "name1",
        type: "type2",
        disabled: false,
        children: [
            {
                id: "2",
                name: "name2",
                type: "type4",
                disabled: true,
                children: [
                    {
                        id: "3",
                        name: "name3",
                        type: "type5",
                        disabled: true,
                    },
             },
             {     
                  id: "4",
                  name: "name4",
                  type: "type3",
                  disabled: true,
                  children: [
                      {
                           id: "5",
                           name: "name5",
                           type: "type4",
                           disabled: true,
                           children: [],
                       },
                   ],
               },
              
                   id: "6",
                   name: "name6",
                   type: "type3",
                   disabled: true
                   children: [
                       {
                           id: "7",
                           name: "name7",
                           type: "type4",
                           disabled: true,
                           children: [],
                       },
                    ],
                }
            },
            .....//similar objects
        ];

                      

How can i fix the above snippet such that it adds disabled property to children too. could someone help me with this. thanks.

EDIT:

tried answer is like below,

function loop_children(children) {
    if (!children || children.lengh <=0) {
        return;
    } else {
        return children.map((child) => {
            ...child,
            disabled: child?.type !== "type2" ? true : false,
            children: loop_children(children) 
        })
    };
}    
}

return arr_obj.map((arr) => ({
    ...arr,
    disabled: arr?.type !== "type2" ? true : false,
    children: loop_children(arr.children) //seems like a problem here in adding children field again
 }));    

but this adds children array under children again.

This code doesnt work. it adds field disabled to children but also adds children within children.

could someone help me with this. thanks.

Answer 1

Not sure why all the others are mapping, just alter the object with a simple recursive call when it has a children property.

const arr_obj = [{
  id: "1",
  name: "name1",
  type: "type2",
  children: [{
    id: "2",
    name: "name2",
    type: "type4",
    children: [{
      id: "3",
      name: "name3",
      type: "type5",
    }, ]
  }, ]
}];

const disableEnableObj = (arr, type) => {
  arr.forEach(obj => {
    obj.disabled = obj.type !== type;
    obj.children && disableEnableObj(obj.children, type);
  });
}

disableEnableObj(arr_obj, 'type2');

console.log(arr_obj);