Updated new key value pair at every child level in array of object-CodePudding

i have array of objects and i want to update value at every nested child level I'm not able to find how to achieve that

Input

let data = [{
    label: 'classA',
    value: 40,
    children: [{
        label: 'classA_sectioA',
        value: 12,
        children: [{
            label: 'classA_sectioA_student1',
            value: 7,
          },
          {
            label: 'classA_sectioA_student2',
            value: 3,
          },
          {
            label: 'classA_sectioA_student3',
            value: 2,
          }
        ]
      },
      {
        label: 'classA_sectioB',
        value: 15,
        children: [{
            label: 'classA_sectioB_student1',
            value: 7,
          },
          {
            label: 'classA_sectioB_student2',
            value: 3,
          },
          {
            label: 'classA_sectioB_student3',
            value: 5,
          }
        ],
      },
      {
        label: 'classA_sectioC',
        value: 13,
        children: [{
            label: 'classA_sectioC_student1',
            value: 6,
          },
          {
            label: 'classA_sectioC_student2',
            value: 3,
          },
          {
            label: 'classA_sectioC_student3',
            value: 4,
          }
        ]
      }
    ]
  },
  {
    label: 'classB',
    value: 60,
    children: [{
        label: 'classB_sectioA',
        value: 12,
        children: [{
            label: 'classB_sectioA_student1',
            value: 6,
          },
          {
            label: 'classB_sectioA_student2',
            value: 5,
          },
          {
            label: 'classB_sectioA_student3',
            value: 1,
          }
        ]
      },
      {
        label: 'classB_sectioB',
        value: 18,
        children: [{
            label: 'classB_sectioB_student1',
            value: 3,
          },
          {
            label: 'classB_sectioB_student2',
            value: 13,
          },
          {
            label: 'classB_sectioB_student3',
            value: 2,
          }
        ],
      },
      {
        label: 'classB_sectioC',
        value: 30,
        children: [{
            label: 'classB_sectioC_student1',
            value: 1,
          },
          {
            label: 'classB_sectioC_student2',
            value: 9,
            children: [{
                label: 'shan',
                value: 4,
              },
              {
                label: 'sk',
                value: 2,
              },
              {
                label: 'tk',
                value: 2,
              }
            ]
          },
          {
            label: 'classB_sectioC_student3',
            value: 20,
          }
        ]
      }
    ]
  },
  {
    label: 'classC',
    value: 90,
    children: [{
        label: 'classC_sectioA',
        value: 30,
        children: [{
            label: 'classC_sectioA_student1',
            value: 11,
          },
          {
            label: 'classC_sectioA_student2',
            value: 12,
          },
          {
            label: 'classC_sectioA_student3',
            value: 7,
          }
        ]
      },
      {
        label: 'classC_sectioB',
        value: 20,
        children: [{
            label: 'classC_sectioB_student1',
            value: 1,
          },
          {
            label: 'classC_sectioB_student2',
            value: 16,
          },
          {
            label: 'classC_sectioB_student3',
            value: 13,
          }
        ],
      },
      {
        label: 'classC_sectioC',
        value: 40,
        children: [{
            label: 'classC_sectioC_student1',
            value: 21,
            children: [{
                label: 'shanu',
                value: 22,
                >
                label: 'sk',
                value: 18,
              },
              {
                label: 'tk',
                value: 11,
              }
            ]
          },
          {
            label: 'classC_sectioC_student2',
            value: 12,
          },
          {
            label: 'classC_sectioC_student3',
            value: 7,
          }
        ]
      }
    ]
  }
]

Excepted output

let data = [{
    label: 'classA',
    value: 40,
    Radius: 20
    children: [{
        label: 'classA_sectioA',
        value: 12,
        Radius: 40
        children: [{
            label: 'classA_sectioA_student1',
            value: 7,
          },
          {
            label: 'classA_sectioA_student2',
            value: 3,
          },
          {
            label: 'classA_sectioA_student3',
            value: 2,
          }
        ]
      },
      {
        label: 'classA_sectioB',
        value: 15,
        Radius: 40
        children: [{
            label: 'classA_sectioB_student1',
            value: 7,
            Radius: 60
          },
          {
            label: 'classA_sectioB_student2',
            value: 3,
            Radius: 60
          },
          {
            label: 'classA_sectioB_student3',
            value: 5,
            Radius: 60
          }
        ],
      },
      {
        label: 'classA_sectioC',
        value: 13,
        Radius: 40
        children: [{
            label: 'classA_sectioC_student1',
            value: 6,
            Radius: 60
          },
          {
            label: 'classA_sectioC_student2',
            value: 3,
            Radius: 60
          },
          {
            label: 'classA_sectioC_student3',
            value: 4,
            Radius: 60
          }
        ]
      }
    ]
  },
  {
    label: 'classB',
    value: 60,
    Radius: 20
    children: [{
        label: 'classB_sectioA',
        value: 12,
        Radius: 40
        children: [{
            label: 'classB_sectioA_student1',
            value: 6,
            Radius: 60
          },
          {
            label: 'classB_sectioA_student2',
            value: 5,
            Radius: 60
          },
          {
            label: 'classB_sectioA_student3',
            value: 1,
            Radius: 60
          }
        ]
      },
      {
        label: 'classB_sectioB',
        value: 18,
        Radius: 40
        children: [{
            label: 'classB_sectioB_student1',
            value: 3,
            Radius: 60
          },
          {
            label: 'classB_sectioB_student2',
            Radius: 60
            value: 13,
          },
          {
            label: 'classB_sectioB_student3',
            value: 2,
            Radius: 60
          }
        ],
      },
      {
        label: 'classB_sectioC',
        value: 30,
        Radius: 40
        children: [{
            label: 'classB_sectioC_student1',
            value: 1,
            Radius: 60
          },
          {
            label: 'classB_sectioC_student2',
            Radius: 60
            value: 9,
            children: [{
                label: 'shan',
                value: 4,
                Radius: 80
              },
              {
                label: 'sk',
                value: 2,
                Radius: 80
              },
              {
                label: 'tk',
                value: 2,
                Radius: 80
              }
            ]
          },
          {
            label: 'classB_sectioC_student3',
            value: 20,
            Radius: 60
          }
        ]
      }
    ]
  },
  {
    label: 'classC',
    value: 90,
    Radius: 20
    children: [{
        label: 'classC_sectioA',
        value: 30,
        Radius: 40
        children: [{
            label: 'classC_sectioA_student1',
            value: 11,
            Radius: 60
          },
          {
            label: 'classC_sectioA_student2',
            value: 12,
            Radius: 60
          },
          {
            label: 'classC_sectioA_student3',
            value: 7,
            Radius: 60
          }
        ]
      },
      {
        label: 'classC_sectioB',
        value: 20,
        Radius: 40
        children: [{
            label: 'classC_sectioB_student1',
            value: 1,
            Radius: 60
          },
          {
            label: 'classC_sectioB_student2',
            value: 16,
            Radius: 60
          },
          {
            label: 'classC_sectioB_student3',
            value: 13,
            Radius: 60
          }
        ],
      },
      {
        label: 'classC_sectioC',
        value: 40,
        Radius: 40
        children: [{
            label: 'classC_sectioC_student1',
            Radius: 60
            value: 21,
            children: [{
                label: 'shanu',
                value: 22,
                Radius: 80
              },
              {
                label: 'sk',
                value: 18,
                Radius: 80
              },
              {
                label: 'tk',
                value: 11,
                Radius: 80
              }
            ]
          },
          {
            label: 'classC_sectioC_student2',
            value: 12,
            Radius: 60
          },
          {
            label: 'classC_sectioC_student3',
            value: 7,
            Radius: 60
          }
        ]
      }
    ]
  }
]

//a new property radius added at every level and it's multiply by 20 with there levels of depth

i tried to update object with recursive function but after certain level i don't know how to do that recursively because i have to hold the index at every level that is the pain point for me

CodePudding user response：

map() over each object in the array
Use a helper function, addRadius that accepts an object and
1. If there are children, recursive call the same function to add radius
2. Add radius to the object
3. return object

let data = [{label: 'classA', value: 40, children: [{label: 'classA_sectioA', value: 12, children: [{label: 'classA_sectioA_student1', value: 7, }, {label: 'classA_sectioA_student2', value: 3, }, {label: 'classA_sectioA_student3', value: 2, } ] }, {label: 'classA_sectioB', value: 15, children: [{label: 'classA_sectioB_student1', value: 7, }, {label: 'classA_sectioB_student2', value: 3, }, {label: 'classA_sectioB_student3', value: 5, } ], }, {label: 'classA_sectioC', value: 13, children: [{label: 'classA_sectioC_student1', value: 6, }, {label: 'classA_sectioC_student2', value: 3, }, {label: 'classA_sectioC_student3', value: 4, } ] } ] }, {label: 'classB', value: 60, children: [{label: 'classB_sectioA', value: 12, children: [{label: 'classB_sectioA_student1', value: 6, }, {label: 'classB_sectioA_student2', value: 5, }, {label: 'classB_sectioA_student3', value: 1, } ] }, {label: 'classB_sectioB', value: 18, children: [{label: 'classB_sectioB_student1', value: 3, }, {label: 'classB_sectioB_student2', value: 13, }, {label: 'classB_sectioB_student3', value: 2, } ], }, {label: 'classB_sectioC', value: 30, children: [{label: 'classB_sectioC_student1', value: 1, }, {label: 'classB_sectioC_student2', value: 9, children: [{label: 'shan', value: 4, }, {label: 'sk', value: 2, }, {label: 'tk', value: 2, } ] }, {label: 'classB_sectioC_student3', value: 20, } ] } ] }, {label: 'classC', value: 90, children: [{label: 'classC_sectioA', value: 30, children: [{label: 'classC_sectioA_student1', value: 11, }, {label: 'classC_sectioA_student2', value: 12, }, {label: 'classC_sectioA_student3', value: 7, } ] }, {label: 'classC_sectioB', value: 20, children: [{label: 'classC_sectioB_student1', value: 1, }, {label: 'classC_sectioB_student2', value: 16, }, {label: 'classC_sectioB_student3', value: 13, } ], }, {label: 'classC_sectioC', value: 40, children: [{label: 'classC_sectioC_student1', value: 21, children: [{label: 'shanu', value: 22, },{label: 'sk', value: 18, }, {label: 'tk', value: 11, } ] }, {label: 'classC_sectioC_student2', value: 12, }, {label: 'classC_sectioC_student3', value: 7, } ] } ] } ];

const addRadius = (to, depth = 1) => {
    if (to.children) {
        to.children = to.children.map(e => addRadius(e, depth   1));
    }
    return { radius: (depth * 20), ...to };
};

const res = data.map(o => addRadius(o));

console.log(res);

CodePudding user response：

This simple code should do the job

const listItems = [
  {
    label: "classA",
    value: 40,
    children: [
      {
        label: "classA_sectioA",
        value: 12,
        children: [
          {
            label: "classA_sectioA_student1",
            value: 7
          },
          {
            label: "classA_sectioA_student2",
            value: 3
          },
          {
            label: "classA_sectioA_student3",
            value: 2
          }
        ]
      }
    ]
  }
];

function mapRecursive(items = [], depth = 1) {
  let newList = [];

  for (let i = 0; i < items.length; i  ) {
    const item = { ...items[i] };

    const children = item?.children ?? [];

    if (!!children.length) {
      const newItems = mapRecursive(children, depth   1);
      item.children = newItems;
    }

    newList.push({
      ...item,
      radius: (item.radius ?? 0)   depth * 20,
      depth
    });
  }

  return newList;
}

console.log("mapRecursive", mapRecursive(listItems));

Hope it helps

CodePudding user response：

Using plain recursion and setting the property radius on each node visited.

As a side note, since I used a named function expression to have the recursion right it should be said that such a strategy is allowed also when setting a variable with it like:

const f = function internalname(i=0){
 console.log(i);
 if (i<10) internalname(  i);
}
f();

let data = [{
    label: 'classA',
    value: 40,
    children: [{
        label: 'classA_sectioA',
        value: 12,
        children: [{
            label: 'classA_sectioA_student1',
            value: 7,
          },
          {
            label: 'classA_sectioA_student2',
            value: 3,
          },
          {
            label: 'classA_sectioA_student3',
            value: 2,
          }
        ]
      }],
}];

//set the radius property to the passed nodes based on the depth
function setRadius(depth, ...nodes){  
  //for each node
  nodes.forEach( node => {
    node.radius = depth*20;
    //if there's the property children set for this node,
    if('children' in node)
      //set the radius to all the children with depth 1
      setRadius(depth 1, ...node.children);
  });  
}

setRadius(1, ...data);

console.log(data);

CodePudding user response：

You could map new object with their radius.

const
    data = [{ label: 'classA', value: 40, children: [{ label: 'classA_sectioA', value: 12, children: [{ label: 'classA_sectioA_student1', value: 7 }, { label: 'classA_sectioA_student2', value: 3 }, { label: 'classA_sectioA_student3', value: 2, }] }, { label: 'classA_sectioB', value: 15, children: [{ label: 'classA_sectioB_student1', value: 7 }, { label: 'classA_sectioB_student2', value: 3 }, { label: 'classA_sectioB_student3', value: 5 }] }, { label: 'classA_sectioC', value: 13, children: [{ label: 'classA_sectioC_student1', value: 6 }, { label: 'classA_sectioC_student2', value: 3 }, { label: 'classA_sectioC_student3', value: 4 }] }] }, { label: 'classB', value: 60, children: [{ label: 'classB_sectioA', value: 12, children: [{ label: 'classB_sectioA_student1', value: 6 }, { label: 'classB_sectioA_student2', value: 5 }, { label: 'classB_sectioA_student3', value: 1 }] }, { label: 'classB_sectioB', value: 18, children: [{ label: 'classB_sectioB_student1', value: 3 }, { label: 'classB_sectioB_student2', value: 13 }, { label: 'classB_sectioB_student3', value: 2 }] }, { label: 'classB_sectioC', value: 30, Radius: 40, children: [{ label: 'classB_sectioC_student1', value: 1, Radius: 60 }, { label: 'classB_sectioC_student2', Radius: 60, value: 9, children: [{ label: 'shan', value: 4 }, { label: 'sk', value: 2 }, { label: 'tk', value: 2 }] }, { label: 'classB_sectioC_student3', value: 20 }] }] }, { label: 'classC', value: 90, children: [{ label: 'classC_sectioA', value: 30, Radius: 40, children: [{ label: 'classC_sectioA_student1', value: 11 }, { label: 'classC_sectioA_student2', value: 12 }, { label: 'classC_sectioA_student3', value: 7 }] }, { label: 'classC_sectioB', value: 20, children: [{ label: 'classC_sectioB_student1', value: 1 }, { label: 'classC_sectioB_student2', value: 16 }, { label: 'classC_sectioB_student3', value: 13 }] }, { label: 'classC_sectioC', value: 40, children: [{ label: 'classC_sectioC_student1', value: 21, children: [{ label: 'shanu', value: 22 }, { label: 'sk', value: 18 }, { label: 'tk', value: 11 }] }, { label: 'classC_sectioC_student2', value: 12 }, { label: 'classC_sectioC_student3', value: 7 }] }] }],
    addRadius = Radius => ({ children, ...o }) => children
        ? { ...o, Radius, children: children.map(addRadius(Radius   20)) }
        : { ...o, Radius },
    result = data.map(addRadius(20));

console.log(result);

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