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

It should be better if you can "compress" your code to only show one tiny example of your needs. BTW if you need to play with arrays (remapping, filtering, etc..) I can suggest to use Underscore library http://underscorejs.org/ — michelem, Jul 01 '15 at 06:26
Why not flatten the data structure and then work on that as an active model? — deostroll, Jul 01 '15 at 07:45
Server sends data like that. Do you mean to flatten at client side? @deostroll — agriboz, Jul 01 '15 at 07:58

score 0 · Answer 1 · answered Jul 01 '15 at 09:04

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

Angular collecting data best practice

1 Answers1