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.

You have only one level nesting or can be any number of levels? — Tushar Shahi
– Tushar Shahi, Commented Feb 2, 2022 at 9:17
the outer part can have one children. within children can have one one or two levels of children.' — stackuser
– stackuser, Commented Feb 2, 2022 at 9:32

epascarello · Accepted Answer · 2022-02-02 13:09:22Z

2

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);

answered Feb 2, 2022 at 13:09

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

1 Comment

stackuser Over a year ago

thanks how can i create a new array and push the disabled property to it rather than modifying the arr_obj thanks.

zedian · Accepted Answer · 2022-02-02 09:33:08Z

-1

You have to loop through the children too. It should look something like this:

function loop_children(children) {
    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(children)
}));

edited Feb 2, 2022 at 9:33

answered Feb 2, 2022 at 9:15

zedian

4771 gold badge8 silver badges16 bronze badges

5 Comments

stackuser Over a year ago

thanks shall try this and see

stackuser Over a year ago

i have tried to use this and i get children.map is not a function error.

stackuser Over a year ago

i have tried solution (added to my question) and i get children array added to the children object.

epascarello Over a year ago

Needs to check for children before looping

epascarello Over a year ago

function loop_children(children) { return children && children.map((child) => {

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related