Как построить массив деревьев из плоского массива объектов со свойствами категорий и подкатегорий

Heads up, для javascript я обычно использую Lodash (обычно пишутся как _ в коде), но большинство этих методов также должны быть встроены в объекты в javascript (то есть _.forEach = Array.forEach())

    const tree = [];
    // First Group all elements of the same category (PHP, Frontend, etc.)
    data = _.groupBy(data, 'category');
    _.forEach(data, function (categoryElements, categoryName) {
      // Each Category will have it own subCategories that we will want to handle
      let categorySubCategories = {};
      // The categoryElements will be an array of all the objects in a given category (php / frontend / etc..)
      categoryElements.map(function (element) {
        // For each of these categoryies, we will want to grab the subcategories they belong to
        element.subCategory.map(function (subCategoryName) {
          // Check if teh category (PHP) already has already started a group of this subcategory,
          // else initialize it as an empty list
          if (!categorySubCategories[subCategoryName]) { categorySubCategories[subCategoryName] = []; }
          // Push this element into the subcategory list
          categorySubCategories[subCategoryName].push({id: element.id, name: element.name});
        });
      });
      // Create a category map, which will be a list in the format {name, children}, created from
      // our categorySubCategories object, which is in the format {name: children}
      let categoryMap = [];
        _.forEach(categorySubCategories, function (subCategoryElements, subCategoryName) {
          categoryMap.push({name: subCategoryName, children: subCategoryElements});
        });
      // Now that we've grouped the sub categories, just give the tree it category name and children
      tree.push({name: categoryName, children: categoryMap});
    });
  };

Ключом к успеху здесь является создание промежуточного формата, который позволяет легко искать. Поскольку вы работаете с children массивами, вам приходится использовать filter и find когда вы добавляете что-то новое, для предотвращения дублирования и обеспечения группировки.

Работая с форматом, основанным на объектах и ключах, гораздо проще выполнять группировку.

Мы можем создавать группы в одном вложенном цикле, что означает, что мы касаемся только одного элемента для основной логики. Группа имеет такой формат:

{ "categoryName": { "subCategoryName": [ { id, name } ] } }

Тогда получение требуемого формата { name, children } - это вопрос еще одного цикла над элементами этого дерева. В этом цикле мы переходим из { "categoryName": catData } в { name: "categoryName", children: catData }

Вот пример, который показывает два этапа отдельно:

const data=[{id:1,name:"Zend",category:"php",subCategory:["framework"]},{id:2,name:"Laravel",category:"php",subCategory:["framework"]},{id:3,name:"Vesion 5",category:"php",subCategory:["versions"]},{id:4,name:"Angular",category:"frontend",subCategory:["framework","typescript"]},{id:5,name:"Aurelia",category:"frontend",subCategory:["framework","typescript"]},{id:6,name:"JQuery",category:"frontend",subCategory:[]}];

// { category: { subCategory: [ items ] } }
const categoryOverview = data.reduce(
  (acc, { id, name, category, subCategory }) => {
    // Create a top level group if there isn't one yet
    if (!acc[category]) acc[category] = {};
    
    subCategory.forEach(sc => { 
      // Create an array for this subCat if there isn't one yet
      acc[category][sc] = (acc[category][sc] || [])
        // and add the current item to it
        .concat({ id, name }); 
    });
    
    return acc;
  },
  {}
)

const nameChildrenMap = Object
  .entries(categoryOverview)
  // Create top level { name, children } objects
  .map(([cat, subCats]) => ({
    name: cat,
    children: Object
      .entries(subCats)
      // Create sub level { name, children } objects
      .map(([subCat, items]) => ({
        name: subCat,
        children: items
      }))
  }))

console.log(nameChildrenMap);