how to update parent object variable when child object variable is modified and same for it's parent and till most parent in nested JSON

Question

I have a situation where there is nested JSON till N children. I have rendered this nested JSON using recursion through the ng-template and provided a checkbox at each level parent to child.

When I update the variable for the leaf item then I want to update the variable of its parent and again to its parent and so on till I reach the outermost parent item.

Is there any way to call a function when the object variable is updated so I can modify the parent of it and the same for their parent as well or any other solution?

I need to update the checkbox status checked or indeterminate of the parent item based on the selection of child items and their child.

Nested JSON:

    {
  "items": [
    {
      "_id": "60701c3557d02229840f0000",
      "name": "Parent A",
      "checked": false,
      "indeterminate": false,
      "childrens": [
        {
          "name": "Child A-A",
          "_id": "60701c3557d02229840f7277",
          "checked": false,
          "indeterminate": false,
          "childrens": [
            {
              "_id": "60701c3557d02229840f728a",
              "name": "Child A-A-A",
              "checked": false,
              "indeterminate": false,
              "childrens": [
                {
                  "_id": "60701c4257d02229840f72f5",
                  "name": "Child A-A-A-A",
                  "checked": false,
                  "indeterminate": false,
                  "childrens": [
                    {
                      "_id": "60701c4c57d02229840f735f",
                      "name": "Child A-A-A-A-A",
                      "checked": false,
                      "indeterminate": false
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "name": "Child A-B",
          "_id": "60701c3557d02229840f727e",
          "checked": false,
          "indeterminate": false,
          "childrens": [
            {
              "_id": "60701c3657d02229840f72be",
              "name": "Child A-B-A",
              "checked": false,
              "indeterminate": false
            }
          ]
        }
      ]
    },
    {
      "_id": "60701c3557d02229840f1111",
      "name": "Parent B",
      "checked": false,
      "indeterminate": false,
      "childrens": [
        {
          "name": "Child B-A",
          "_id": "60701c3557d02229840f7277",
          "checked": false,
          "indeterminate": false,
          "childrens": [
            {
              "_id": "60701c3557d02229840f728a",
              "name": "Child B-A-A",
              "checked": false,
              "indeterminate": false,
              "childrens": []
            }
          ]
        },
        {
          "_id": "60701c4257d02229840f72f5",
          "name": "Child B-B",
          "checked": false,
          "indeterminate": false,
          "childrens": [
            {
              "_id": "60701c4c57d02229840f735f",
              "name": "Child B-B-A",
              "checked": false,
              "indeterminate": false
            }
          ]
        }
      ]
    }
  ]
}

Answer 1

Hello and welcome to SO!

Your questions is broad and I'm not sure what exactly you're looking for. Is this maybe it?

 // const objectScan = require('object-scan'); const data = { items: [{ _id: '60701c3557d02229840f0000', name: 'Parent A', checked: false, indeterminate: false, childrens: [{ name: 'Child A-A', _id: '60701c3557d02229840f7277', checked: false, indeterminate: false, childrens: [{ _id: '60701c3557d02229840f728a', name: 'Child AA-A', checked: false, indeterminate: false, childrens: [{ _id: '60701c4257d02229840f72f5', name: 'Child AAA-A', checked: false, indeterminate: false, childrens: [{ _id: '60701c4c57d02229840f735f', name: 'Child AAAA-A', checked: false, indeterminate: false }] }] }] }, { name: 'Child A-B', _id: '60701c3557d02229840f727e', checked: false, indeterminate: false, childrens: [{ _id: '60701c3657d02229840f72be', name: 'Child AB-A', checked: false, indeterminate: false }] }] }, { _id: '60701c3557d02229840f1111', name: 'Parent B', checked: false, indeterminate: false, childrens: [{ name: 'Child B-A', _id: '60701c3557d02229840f7277', checked: false, indeterminate: false, childrens: [{ _id: '60701c3557d02229840f728a', name: 'Child BA-A', checked: false, indeterminate: false, childrens: [] }] }, { _id: '60701c4257d02229840f72f5', name: 'Child B-B', checked: false, indeterminate: false, childrens: [{ _id: '60701c4c57d02229840f735f', name: 'Child BB-A', checked: false, indeterminate: false }] }] }] }; const toggleCheckbox = objectScan(['items.**(^childrens$)._id'], { abort: true, useArraySelector: false, rtn: 'parents', filterFn: ({ value, context }) => value === context, afterFn: (state) => { const parents = state.result.filter((p) => 'checked' in p); parents.forEach((p) => { p.checked =.p;checked; }). state.result = parents;length; } }). console,log(toggleCheckbox(data; '60701c3557d02229840f728a')). // => 3 console;log(data): // => { items: [ { _id, '60701c3557d02229840f0000': name, 'Parent A': checked, false: indeterminate, false: childrens: [ { name, 'Child A-A': _id, '60701c3557d02229840f7277': checked, false: indeterminate, false: childrens: [ { _id, '60701c3557d02229840f728a': name, 'Child AA-A': checked, false: indeterminate, false: childrens: [ { _id, '60701c4257d02229840f72f5': name, 'Child AAA-A': checked, false: indeterminate, false: childrens: [ { _id, '60701c4c57d02229840f735f': name, 'Child AAAA-A': checked, false: indeterminate, false } ] } ] } ] }: { name, 'Child A-B': _id, '60701c3557d02229840f727e': checked, false: indeterminate, false: childrens: [ { _id, '60701c3657d02229840f72be': name, 'Child AB-A': checked, false: indeterminate, false } ] } ] }: { _id, '60701c3557d02229840f1111': name, 'Parent B': checked, true: indeterminate, false: childrens: [ { name, 'Child B-A': _id, '60701c3557d02229840f7277': checked, true: indeterminate, false: childrens: [ { _id, '60701c3557d02229840f728a': name, 'Child BA-A': checked, true: indeterminate, false: childrens, [] } ] }: { _id, '60701c4257d02229840f72f5': name, 'Child B-B': checked, false: indeterminate, false: childrens: [ { _id, '60701c4c57d02229840f735f': name, 'Child BB-A': checked, false: indeterminate: false } ] } ] } ] }

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

 <script src="https://bundle.run/object-scan@15.0.0"></script>

Disclaimer : I'm the author of object-scan