Как упростить вложенный массив javascript с помощью map (), Reduce () и Filter ()?

Question

Прежде всего, я новичок в Javascript, ES6 и т. Д., И я родом из Java. У меня сложная структура массива JavaScript (пример приведен ниже), Я пытаюсь преобразовать этот массив в карту (аналогично тому, как это имеет Java, пара ключ-значение), ключом являются имена прав доступа (например, KEY-1, KEY-2, KEY-3, KEY-4, KEY- 5 в отношении примера массива javascript, приведенного ниже), в то время как значение - это разделенные запятыми значения фактического разрешения. Я могу добиться этого, зацикливая b через вложенные массивы, но я пытаюсь избежать зацикливания и хотел сделать это с помощью map () / redu () / filter ()

Вот пример того, как карта должна содержать данные. Поскольку KEY-2 присутствует в обоих массивах, они будут переопределены в один (что совершенно нормально)

KEY-1 = ["Roles.Create","Roles.Edit"]
KEY-2 = ["API-Admin.Create","API-Admin.Edit","API-Admin.Read"]
KEY-3 = ["Roles.Create","Roles.Edit"]
KEY-4 = ["Users.Read"]      
KEY-5 = ["Roles.Create","Roles.Edit"]

Javascript Array

const teamArr = [
  {
    "name":"Team1",
    "accountId":"Billing",
    "teamId":"12345",
    "permissions": {
        "KEY-1": [
            "Roles.Create",
            "Roles.Edit"
        ],
        "KEY-2": [
            "API-Admin.Create",
            "API-Admin.Edit",
            "API-Admin.Read"
        ],
        "KEY-3": [
          "Roles.Create",
          "Roles.Edit"
        ]
     }
   },
   {
     "name":"Team2",
     "accountId":"Sales",
     "teamId":"6789",
     "permissions": {
         "KEY-4": [
             "Users.Read"
         ],
         "KEY-2": [
            "API-Admin.Create",
            "API-Admin.Edit",
            "API-Admin.Read"
        ],
         "KEY-5": [
           "Roles.Create",
           "Roles.Edit"
         ]
      }
   }
]

KEY-1, KEY-2, KEY-3, KEY-4, KEY-5 и т. Д. Генерируются динамически, поэтому я НЕ МОГУ жестко кодировать имена этих ключей в своем коде (например, KEY-1, KEY-2 и т. Д.). )

Я подписался на этот пост https://www.freecodecamp.org/news/15-useful-javascript-examples-of-map-reduce-and-filter-74cbbb5e0a1f/ и ниже то, что я пытался, но я думаю, я изо всех сил пытаюсь правильно использовать sort () / redu () правильно на сложном массиве JavaScript. Я бы предпочел простое решение Javascript / ES6 (без JQuery, пожалуйста).

const sorted = test.sort((a, b) => a.permissions - b.permissions);
// Using reduce:
dict = sorted.reduce(
    (dict, el, index) => (dict[el.permissions] = sorted.length - index, dict),
    {}
);

console.log(dict)

Любая помощь здесь будет высоко оценена. Спасибо

Answer 1

Вы можете сделать это с помощью комбинации flatMap и reduce (хотя flatMap пока поддерживается не во всех браузерах):

const teamArr = [{
    "name": "Team1",
    "accountId": "Billing",
    "teamId": "12345",
    "permissions": {
      "KEY-1": [
        "Roles.Create",
        "Roles.Edit"
      ],
      "KEY-2": [
        "API-Admin.Create",
        "API-Admin.Edit",
        "API-Admin.Read"
      ],
      "KEY-3": [
        "Roles.Create",
        "Roles.Edit"
      ]
    }
  },
  {
    "name": "Team2",
    "accountId": "Sales",
    "teamId": "6789",
    "permissions": {
      "KEY-4": [
        "Users.Read"
      ],
      "KEY-2": [
        "API-Admin.Create",
        "API-Admin.Edit",
        "API-Admin.Read"
      ],
      "KEY-5": [
        "Roles.Create",
        "Roles.Edit"
      ]
    }
  }
]

const result = teamArr
  .flatMap(t => Object.entries(t.permissions))
  .reduce((acc, [key, permissions]) => {
    acc[key] = acc[key] || [];
    acc[key].push(...permissions.filter(p => !acc[key].includes(p)));
    return acc;
  }, {});
  
console.log(result);

Если массив разрешений для ключа может быть очень большим, вы также можете рассмотреть возможность использования Set рядом с каждым ключом в аккумуляторе.

Answer 2

Поскольку вам не нужно беспокоиться о других ключах / значениях, вам необходимо сначала создать массив всех permissions объектов.Затем вы извлекаете свойства из этого массива, сохраняя уникальность массивов с помощью Sets:

const teamArr = [{"name":"Team1","accountId":"Billing","teamId":"12345","permissions":{"KEY-1":["Roles.Create","Roles.Edit"],"KEY-2":["API-Admin.Create","API-Admin.Edit","API-Admin.Read"],"KEY-3":["Roles.Create","Roles.Edit"]}},{"name":"Team2","accountId":"Sales","teamId":"6789","permissions":{"KEY-4":["Users.Read"],"KEY-2":["API-Admin.Create","API-Admin.Edit","API-Admin.Read"],"KEY-5":["Roles.Create","Roles.Edit"]}}];
const res = teamArr.flatMap(({ permissions }) => Object.entries(permissions)).reduce((a, [k, v]) => ((a[k] = [...new Set(((a[k] = a[k] || []).push(...v), a[k]))], a)), {});
console.log(res);

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

Более подробная версия:

const teamArr = [{"name":"Team1","accountId":"Billing","teamId":"12345","permissions":{"KEY-1":["Roles.Create","Roles.Edit"],"KEY-2":["API-Admin.Create","API-Admin.Edit","API-Admin.Read"],"KEY-3":["Roles.Create","Roles.Edit"]}},{"name":"Team2","accountId":"Sales","teamId":"6789","permissions":{"KEY-4":["Users.Read"],"KEY-2":["API-Admin.Create","API-Admin.Edit","API-Admin.Read"],"KEY-5":["Roles.Create","Roles.Edit"]}}];
const permissions = teamArr.map(({ permissions }) => permissions);
const res = permissions.flatMap(Object.entries).reduce((a, [k, v]) => {
  a[k] = a[k] || [];
  a[k].push(...v);
  a[k] = [...new Set(a[k])];
  return a;
}, {});
console.log(res);

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

Answer 3

const teamArr = [
  {
    "name":"Team1",
    "accountId":"Billing",
    "teamId":"12345",
    "permissions": {
        "KEY-1": [
            "Roles.Create",
            "Roles.Edit"
        ],
        "KEY-2": [
            "API-Admin.Create",
            "API-Admin.Edit",
            "API-Admin.Read"
        ],
        "KEY-3": [
          "Roles.Create",
          "Roles.Edit"
        ]
     }
   },
   {
     "name":"Team2",
     "accountId":"Sales",
     "teamId":"6789",
     "permissions": {
         "KEY-4": [
             "Users.Read"
         ],
         "KEY-2": [
            "API-Admin.Create",
            "API-Admin.Edit",
            "API-Admin.Read"
        ],
         "KEY-5": [
           "Roles.Create",
           "Roles.Edit"
         ]
      }
   }
];



function extractPermissions(obj) {
    const perms = {};
    obj.forEach(entry => {
        if (!entry['permissions']) {
            return;
        }
        Object.keys(entry.permissions).forEach(key => {
            if (!perms[key]) {
                perms[key] = [];
            }
            entry.permissions[key].forEach(value => {
                if (!perms[key].some(val => val === value)) {
                    perms[key].push(value);
                }
            });
        });
    });
    return perms;
}
console.log(JSON.stringify(extractPermissions(teamArr), null, 2));