Angular collecting data best practice

Question

I have a data table which represents some information about user authorization. At the head of the table there are action types such as:

Insert
Update
Select
Delete
Approve
Full Control
Deny

At the left side of the table there are names for the action types. For instance when the user clicks for Insert and Update on the first row which is (Organization) new array is populated.

What i want to ask is, is there a better way to achieve the same output? I think the code looks messy because of using nested angular.forEach

Thanks in advance.

Plnkr

Answer 1

Try after flattening the dataset, and then working with the flattened view.

Hence the final results ends up with a structure like follows:

[
  {
    "name": "Organization",
    "actions": [
      {
        "action": "Insert",
        "checked": true
      },
      {
        "action": "Update",
        "checked": false
      },
      {
        "action": "Select",
        "checked": false
      },
      {
        "action": "Delete",
        "checked": false
      },
      {
        "action": "Approve",
        "checked": false
      },
      {
        "action": "Full Control",
        "checked": false
      },
      {
        "action": "Deny",
        "checked": false
      }
    ]
  },
  {
    "name": "Company",
    "actions": [
      {
        "action": "Insert",
        "checked": false
      },
      {
        "action": "Update",
        "checked": false
      },
      {
        "action": "Select",
        "checked": false
      },
      {
        "action": "Delete",
        "checked": false
      },
      {
        "action": "Approve",
        "checked": false
      },
      {
        "action": "Full Control",
        "checked": true
      },
      {
        "action": "Deny",
        "checked": false
      }
    ]
  },
  {
    "name": "Department One",
    "actions": [
      {
        "action": "Insert",
        "checked": false
      },
      {
        "action": "Update",
        "checked": false
      },
      {
        "action": "Select",
        "checked": false
      },
      {
        "action": "Delete",
        "checked": false
      },
      {
        "action": "Approve",
        "checked": false
      },
      {
        "action": "Full Control",
        "checked": true
      },
      {
        "action": "Deny",
        "checked": false
      }
    ]
  },
  {
    "name": "Department Two",
    "actions": [
      {
        "action": "Insert",
        "checked": false
      },
      {
        "action": "Update",
        "checked": false
      },
      {
        "action": "Select",
        "checked": false
      },
      {
        "action": "Delete",
        "checked": false
      },
      {
        "action": "Approve",
        "checked": false
      },
      {
        "action": "Full Control",
        "checked": false
      },
      {
        "action": "Deny",
        "checked": false
      }
    ]
  }
]

The following function was used for flattening:

  function flatten(arr) {
    for (var k = 0, l = arr.length; k < l; k++) {
      var obj = arr[k];
      var rec = {};
      rec.name = obj.name;
      rec.actions = [];
      obj.actions.forEach(function(act, idx) {
        rec.actions.push({
          action: action[idx].text,
          checked: act.isChecked
        });
      });
      vm.records.push(rec);
      if (obj.childs && obj.childs.length) {
        flatten(obj.childs);
      }
    }

  }

Plunk: http://plnkr.co/edit/XFPuSQnRwe2YgB6EtfHa?p=preview