JSFiddle - React, Tailwind, and code Playground

by Evgeniy Kvasyuk

TypeScript

type Category = {
	identifier: string,
  subCategories: category[],
}

type CategoryWithParent = Category & {
	parentCategoryId?: Nullable<string>;
} 

const testingCategoryArray = [
    {
      identifier: 'sub1',
      subCategories: [
        {
          identifier: 'sub1_sub1',
          subCategories: []
        },
        {
          identifier: 'sub1_sub2',
          subCategories: []
        }
      ]
    },
    {
      identifier: 'sub2',
      subCategories: [
        {
          identifier: 'sub2_sub1',
          subCategories: []
        }
      ]
    }
  ];
  
  
  function createPCSFlatArray(pcsCategories: Category[]): CategoryWithParentId[] {
  let index = 0;
  const pcsCategoriesWithSubcategoriesArray = [...pcsCategories];
  const resultArray = [] as CategoryWcsPcsWithParentCategoryId[];

  while (index < pcsCategoriesWithSubcategoriesArray.length) {
    const category = pcsCategoriesWithSubcategoriesArray[index];
    const subCategories = category.subCategories;
    if (subCategories) {
      pcsCategoriesWithSubcategoriesArray.push(
        ...subCategories.map((subCategory) => ({ ...subCategory, parentCategory: category.identifier })),
      );
    }

    resultArray.push({ ...category });

    index++;
  }

  return resultArray;
}

console.log(createPCSFlatArray(testingCategoryArray));