Map through the deep nested array of objects and update the value based on condition-CodePudding

I am looping through the array of objects and then searching for a specific ID in deep nested array of objects. Once the id is returned, the status has to be changed to the specific value and then the whole updated array should be returned.

Problem: In my case, the code goes into the first if statement, but in the end I do not get the updated result. The input array of objects is always returned. What could be the issue?

FUNCTION:

export function findChild(array: any, id: string): array {
                return array.map((node) => {
                    if (node.id === id) {
                        return { ...node, status: 'Activated' };
                    } else {
                        if (node.children?.length) {
                            findChild(node.children, id);
                        }
                        
                    }
            
                    return node;
                });
            }

Plain JS

function findChild(array, id) {
  return array.map((node) => {
    if (node.id === id) {
      return { ...node, status: 'Activated' };
    } else {
      if (node.children?.length) {
        findChild(node.children, id);
      }
    }
    return node;
  });
}

findChild(input,7)
   console.log(input)

**INPUT** This is just an example of input. The array of objects have multiple children and I have to go through all ids to check the condition and then update the value of status


<script>
  let input = [{
      id: '1',
      amt: '30',
      status: 'Active',
      children: [{
          id: 'SG2',
          amt: '305',
          status: 'Active',
        },
        {
          id: '5',
          amt: '30',
          status: 'Active',
          children: [],
        },
      ],
    },
    {
      id: '6',
      amt: '307',
      status: 'Active',
      children: [],
    },
    {
      id: '7',
      amt: '40',
      status: 'Inactive',
      children: [{
        id: '7',
        amt: '40',
        status: 'Inactive',
        children: []
      }],
    },
    {
      id: '8',
      amt: '100',
      status: 'Dead',
      children: [],
    },
  ];
  </script>

CodePudding user response：

Try this

export function updateStatus(array: any, id: string, status: string): array {
  return array.map((node) => {
    if (node.id === id)
      node.status = status;
    else if (node.children != null && node.children.length > 0) 
      node.children = updateStatus(node.children, id, status);
    return node;
  });
}

Running code

function updateStatus(array, id, status){
  return array.map((node) => {
    if (node.id === id)
      node.status = status;
    else if (node.children != null && node.children.length > 0) 
      node.children = updateStatus(node.children, id, status);
    return node;
  });
}


updateStatus(input,7, 'Activated')
console.log(input)

**INPUT** This is just an example of input. The array of objects have multiple children and I have to go through all ids to check the condition and then update the value of status


<script>
  let input = [{
      id: '1',
      amt: '30',
      status: 'Active',
      children: [{
          id: 'SG2',
          amt: '305',
          status: 'Active',
        },
        {
          id: '5',
          amt: '30',
          status: 'Active',
          children: [],
        },
      ],
    },
    {
      id: '6',
      amt: '307',
      status: 'Active',
      children: [],
    },
    {
      id: '7',
      amt: '40',
      status: 'Inactive',
      children: [{
        id: '7',
        amt: '40',
        status: 'Inactive',
        children: []
      }],
    },
    {
      id: '8',
      amt: '100',
      status: 'Dead',
      children: [],
    },
  ];
  </script>