Converting flat array of object to array of nested objects [duplicate]

Question

I'm trying to convert a flat array of objects coming from my database, to feed to react-table which needs a nested structure to be able to manage expandable sub rows.

I've made a CodeSandbox which is pretty self-explanatory :

https://codesandbox.io/s/tender-chatterjee-kdssi?file=/src/App.js

Basically, my original data is structured like so:

  [
    {
      code: "A0",
      parent: ""
    },
    {
      code: "A01",
      parent: "A0"
    },
    {
      code: "A011",
      parent: "A01"
    },
    {
      code: "B0",
      parent: ""
    },
    {
      code: "B01",
      parent: "B0"
    },
    {
      code: "B011",
      parent: "B01"
    }
  ]

And I want to convert it to this structure :

  [
    {
      code: "A0",
      parent: "",
      subRows: [
        {
          code: "A01",
          parent: "A0",
          subRows: [
            {
              code: "A011",
              parent: "A01"
            }
          ]
        }
      ]
    },
    {
      code: "B0",
      parent: "",
      subRows: [
        {
          code: "B01",
          parent: "B0",
          subRows: [
            {
              code: "B011",
              parent: "B01"
            }
          ]
        }
      ]
    }
  ]

I've tried some recursive ways of doing it, but they're leaving behind some options, so I'd gladly accept some help on this.

Thank you.

Jamiec · Accepted Answer · 2021-06-10 08:09:51Z

6

This can be done with a fairly simple recursive method.

const mockData = [{
    code: "A0",
    parent: ""
  },
  {
    code: "A01",
    parent: "A0"
  },
  {
    code: "A011",
    parent: "A01"
  },
  {
    code: "B0",
    parent: ""
  },
  {
    code: "B01",
    parent: "B0"
  },
  {
    code: "B011",
    parent: "B01"
  }
];


const hierarchize = (parent, list) => {
  const children = list.filter(x => x.parent == parent.code);
  children.forEach(child => hierarchize(child, list));
  parent.subRows = children;
}

const topLevel = mockData.filter(x => x.parent == "");
topLevel.forEach(top => hierarchize(top, mockData));

console.log(topLevel);

answered Jun 10, 2021 at 8:09

Jamiec

136k15 gold badges141 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RebootGG Over a year ago

Is it that bad ? My question was closed because of a duplicate, but neither of the answer in the original topic was as good and simple as this one, IMO. The first and accepted answer does not work unless they are already sorted. The second one uses an external library (underscore) when native JS is now perfectly capable to do this.

Jamiec Over a year ago

@RebootGG no it's not. It is true this question has been asked hundreds of times, but some people are just obsessive about linking a (somewhat) duplicate instead of taking 2 minutes to write some code. I like writing code, and less like finding a (somewhat) duplicate. Glad I could help you.

Felix SO · Accepted Answer · 2021-06-10 08:08:10Z

-2

I think React can use rxjs right??? I think groupBy will do the great job on this. https://www.learnrxjs.io/learn-rxjs/operators/transformation/groupby

answered Jun 10, 2021 at 8:08

Felix SO

1

2 Comments

Jamiec Over a year ago

See this question for why link-only answers are considered bad.

RebootGG Over a year ago

I would like a solution without having to load an external library, but i'll give it a look, thanks

Collectives™ on Stack Overflow

Converting flat array of object to array of nested objects [duplicate]

2 Answers 2

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Linked

Related