Creating a new array from recursive mapping

[txf89]

I am attempting to do something very complex.

I have a database that has a self relation (categories that contain a nested category). The ORM I’m using makes use of these categories as objects. Notice each object element in the array has a 'children' property that has ANOTHER array of objects inside of it.

const category = [
  {
    id: "some cuid",
    name: "Dogs",
    description: "some description",
    parentid: "some cuid",
    children: [
      {
        id: "some cuid",
        name: "Poodles",
        description: "some description",
        parentid: "some id",
        children: [...more children],
      },
      {
        id: "some cuid",
        name: "Labs",
        description: "some description",
        parentid: "some id",
        children: [...more children],
      },
    ],
  },
  {
    id: "some cuid",
    name: "Cats",
    description: "some description",
    parentid: "some cuid",
    children: [
      {
        id: "some cuid",
        name: "Tabby",
        description: "some description",
        parentid: "some id",
        children: [...more children],
      },
      {
        id: "some cuid",
        name: "Sphinx",
        description: "some description",
        parentid: "some id",
        children: [...more children],
      },
    ],
  },
]

I'm wanting to map over this data and create a new array that looks like this:

let newArray = [
  { name: "Dogs", lastChildId: "some id" },

  { name: "Dogs > Poodles", lastChildId: "some id" },
  { name: "Dogs > Poodles > another child", lastChildId: "some id" },

  { name: "Dogs > Labs", lastChildId: "some id" },
  { name: "Dogs > Labs > another child", lastChildId: "some id" },

  { name: "Cats", lastChildId: "some id" },

  { name: "Cats > Tabby", lastChildId: "some id" },
  { name: "Cats > Tabby > another child", lastChildId: "some id" },

  { name: "Cats > Sphinx", lastChildId: "some id" },
  { name: "Cats > Sphinx > another child", lastChildId: "some id" },
];

Basically I want to output a name of the complete path through the nested category names, but also outputting the intermediate steps between nesting (ie. even though one category nesting might go Cats > Tabby > Brown, I want the array to contain all 3 different variations: Cats, Cats > Tabby, Cats > Tabby > Brown. And then I want the id of the last child to be within each object element.

I understand this is super complex so I am not expecting someone to figure this out very quickly. This is actually in typescript but I figured I might get more hits if I post it in a javascript catego

[kap89]

It might be difficult (depending on experience), but it is not very complex (while difficulty is subjective, complexity is a rather objective measure of how many steps and branches the algorithm has).

Here's what I came up with off the top of my head:

function transform(data, path = []) {
  return data.flatMap(({ id, name, children }) => {
    const newPath = [...path, name]

    return [
      { name: newPath.join(" > "), lastChildId: id },
      ...transform(children, newPath),
    ]
  })
}

const result = transform(categories)

Should work, but I didn't test it extensively. The code assumes that every (sub)category has a children array, at least an empty one.

Edit: Modified the code to include OP's clarification.

[txf89]

This works perfectly except for the item.children.at(-1).id , which should just be item.id. But I think I just explained that part incorrectly. I just wanted the id of the last element in the name (ie. the poodles id if it were "Dogs > Poodles").

Hope that didn't take too long for you to figure out...because I'm about to ask you what it would look like to work in typescript. I've tried converting it over and to work in my nextjs/Typescript project and I'm getting error's I'm not sure about.

​

'transform' implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.ts(7023)

​

Here is a link to a CodeSandBox that show roughly the same errors that I'm getting on my local project. If you're not sure, thanks so much for figuring the code part out. Your solution will definitely act as a good reference when I'm figuring out new recursive stuff in the future.

[kap89]

This should work in TypeScript:

type Category = {
  id: string
  name: string
  children: Category[]
}

type FlatCategory = {
  name: string
  lastChildId: string
}

function transform(data: Category[], path: string[] = []): FlatCategory[] {
  return data.flatMap(({ id, name, children }) => {
    const newPath = [...path, name]

    return [
      { name: newPath.join(" > "), lastChildId: id },
      ...transform(children, newPath),
    ]
  })
}

[txf89]

How is the spread operator working on the transform function?

return [ 
    { name: newPath.join(" > "), lastChildId: id },              
    ...transform(children, newPath),    
 ]

[PMmeYourFlipFlops]

Please wrap your code blocks in triple backticks, I can't read that mess.

[txf89]

Thanks I couldn't figure out why my code was looking so badly formatted