Home > Mobile >  How to find and update specific value in nested object array in typescript
How to find and update specific value in nested object array in typescript

Time:10-17

I have a nested object array with n level like this:

const data = {
    "id": null,
    "label": "Locations",
    "value": "Locations",
    "expanded": true,
    "children": [
        {
            "id": "A978919C-E99C-EB11-8F2E-A01D48E35246",
            "value": "Tokyo ",
            "label": "Tokyo ",
            "checked": true,
            "children": [
                {
                    "id": "88887069-179A-EB11-9C25-00163EDCFF95",
                    "isDefault": true,
                    "locationId": "A978919C-E99C-EB11-8F2E-A01D48E35246",
                    "parentsId": null,
                    "createDate": "2021-06-20T19:03:55.190Z",
                    "updateDate": "2021-10-16T13:36:41.353Z",
                    "label": "RAJ - Automotive Japan Fa Fusoh",
                    "checked": true,
                    "children": [],
                    "disabled": false
                }
            ]
        },
       
.
.

    ]
}

I have an object

{
    "id": "A978919C-E99C-EB11-8F2E-A01D48E35246",
    "value": "Tokyo ",
    "label": "Tokyo ",
    "checked": false,
    "_depth": 1,
    "_id": "A978919C-E99C-EB11-8F2E-A01D48E35246",
    "_parent": "rdts1-0",
    "_children": [
        "88887069-179A-EB11-9C25-00163EDCFF95"
    ],
    "_focused": true
}

and I want to edit checked in the object array by using the IDs in the last object and its children, change each checked in object in the object array to false I used DFS for the children but I didn't get a good result any help please.

CodePudding user response:

Seems like recursion would suffice:

const data = {
    id: null,
    label: 'Locations',
    value: 'Locations',
    expanded: true,
    children: [
        {
            id: 'A978919C-E99C-EB11-8F2E-A01D48E35246',
            value: 'Tokyo ',
            label: 'Tokyo ',
            checked: true,
            children: [
                {
                    id: '88887069-179A-EB11-9C25-00163EDCFF95',
                    isDefault: true,
                    locationId: 'A978919C-E99C-EB11-8F2E-A01D48E35246',
                    parentsId: null,
                    createDate: '2021-06-20T19:03:55.190Z',
                    updateDate: '2021-10-16T13:36:41.353Z',
                    label: 'RAJ - Automotive Japan Fa Fusoh',
                    checked: true,
                    children: [],
                    disabled: false,
                },
            ],
        },
    ],
}


function setCheckedToFalse(childrenArr) {
    // error handling
    if (!Array.isArray(childrenArr)) {
        return;
    }

    childrenArr.forEach((child) => {
        // set to false 
        child.checked = false

        // recursion for other children
        setCheckedToFalse(child.children)
    })
}

setCheckedToFalse(data.children)

console.log(data);
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

Not sure if I correctly understood the question, but the code below the checked value in the data object is set to false in case it exists in object.

const data = {
  id: null,
  label: 'Locations',
  value: 'Locations',
  expanded: true,
  children: [
    {
      id: 'A978919C-E99C-EB11-8F2E-A01D48E35246',
      value: 'Tokyo ',
      label: 'Tokyo ',
      checked: true,
      children: [
        {
          id: '88887069-179A-EB11-9C25-00163EDCFF95',
          isDefault: true,
          locationId: 'A978919C-E99C-EB11-8F2E-A01D48E35246',
          parentsId: null,
          createDate: '2021-06-20T19:03:55.190Z',
          updateDate: '2021-10-16T13:36:41.353Z',
          label: 'RAJ - Automotive Japan Fa Fusoh',
          checked: true,
          children: [],
          disabled: false,
        },
      ],
    },
  ],
};

const object = {
  id: 'A978919C-E99C-EB11-8F2E-A01D48E35246',
  value: 'Tokyo ',
  label: 'Tokyo ',
  checked: false,
  _depth: 1,
  _id: 'A978919C-E99C-EB11-8F2E-A01D48E35246',
  _parent: 'rdts1-0',
  _children: ['88887069-179A-EB11-9C25-00163EDCFF95'],
  _focused: true,
};

// Gets all ids (nested ones included) from object
function getIdsHashMap(obj) {
  const idsHashMap = {};

  const loopThroughChildren = (children = []) => {
    children.forEach((el) => {
      idsHashMap[el] = true;

      if (el._children) {
        loopThroughChildren(el._children);
      }
    });
  };

  if (obj.id) {
    idsHashMap[obj.id] = true;
  }

  loopThroughChildren(obj._children);

  return idsHashMap;
}

// Sets checked in data to false if an id exists in object
function setCheckedValue(obj) {
  const idsHash = getIdsHashMap(object);

  const loopThgroughChildren = (children) => {
    if (!Array.isArray(children)) {
      return;
    }

    children.forEach((child) => {
      // Checks, if id exists in hashmap from object
      if (idsHash[child.id]) {
        child.checked = false;
      }

      if (child.children) {
        loopThgroughChildren(child.children);
      }
    });
  };

  if (obj.children) {
    loopThgroughChildren(obj.children);
  }

  return obj;
}

console.log(setCheckedValue(data));
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related