How to loop through nested array of objects and add a new property to each object in array using javascript

Question

Hi i have an array of objects like so,

const arr_obj = [
    {
        id: “1”,
        name: “product”,
        type: “product”,
        children: [
            {
               id: “3”,
               name: “subitem1”,
               type: “subitem”,
               children: [],
            },
            {
               id: “4”,
               name: “item2”,
               type: “item”,
               children: [
                   {
                       id: “5”,
                       name: “subitem3”,
                       type: “subitem”,
                       children: [],
                   }
               ],
           },
           {
               id: “5”,
               name: “item3”,
               type: “item”,
               children: [
                   {
                       id: “6”,
                       name: “subitem7”,
                       type: “subitem”,
                       children: [],
                   },
               ],
           },
           {
               id: “2”,
               name: “group”,
               type: “group”,
               children: [
                   {
                       id: “10”,
                       name: “product1”,
                       type: “product”,
                       children: [
                           {
                               id: “11”,
                               name: “subitem1”,
                               type: “subitem”,
                               children: [],
                            },
                            {
                                id: “12”,
                                name: “item3”,
                                type: “item”,
                                children: [
                                    {
                                        name: “subitem5”,
                                        id: “18”,
                                        type: “subitem”,
                                    },
                                ],
                            } 
                        ];
                    ]

Now as seen from above array. there is nested children array. below is the heirarchy

product
    *children
        *item
            *children
                *subitem
                    *children
        *subitem
            *children
        

or 

group
    *children
        *product
            *children
                *item
                    *children
                        *subitem
                            *children
                *item
                    *children
         *product
             *children

or the children can be empty on first level , 2nd level or any level. children array is recursive.

now from above array i want to check the type of every object and if type is product or group then i want to add property disabled true if not should add property disabled false.

i have too loop through every children array too and check its type and add this property disabled.

i have tried snippet below

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

but this adds disabled only to the outer level but doesnot loop through children and add disabled prop. how can i loop through children array recursively and add this disabled property.

could someone help me with this. thanks.

And how is this different to [this question](https://stackoverflow.com/questions/70952927/how-to-loop-through-an-array-of-objects-and-add-a-new-field-using-react-and-java) you've asked one hour ago? — Andreas, Feb 02 '22 at 12:58
@Andreas: since i dint get answer to the previous question i have added it again with more details. — stackuser, Feb 02 '22 at 13:01

score 0 · Accepted Answer · answered Feb 02 '22 at 13:15

0

you can do it in a simple way like this

const handleLoop = (array) => array.map((elem) => {

  return {
    ...elem,
   ...( elem.children&&{children:handleLoop(elem.children)}),
    disabled: elem?.type === "product" || elem?.type === "group" ? true : false
  }

answered Feb 02 '22 at 13:15

Mohammed naji

983
1
11
23

thanks a ton that works. – stackuser Feb 02 '22 at 13:27

How to loop through nested array of objects and add a new property to each object in array using javascript

1 Answers1