How to format Laravel JSON object to Populate React Treeview using the parent id?

Viewed 17

I'm creating a laravel-react application and trying to create a Treeview that needs to be populated from the MySql database.

This is my sample Treeview populating code that is working and shows my Treeview.

<TreeView
              data={[
                  {
                      id: 0,
                      label: 'Father A',
                      children: [
                          {
                              id: 1,
                              label: 'Child 1'
                          },
                          {
                              id: 2,
                              label: 'Child 2'
                          }
                      ],
                  },
                  {
                      id: 3,
                      label: 'Father 2',
                      children: [
                          {
                              id: 4,
                              label:'Child 3',
                              children: [
                                  {
                                      id: 5,
                                      label: 'Child 1 of Child 3',
                                  }
                              ],
                              
                          },
                          {
                              id:6,
                              label:'Child 4',
                              children:[
                                  {
                                      id:7,
                                      label:'Child 5 of Child 4'
                                  }
                              ]
                          }
                      ]
                  }
              ]}
              renderNode={({ label }) => <div>{label}</div>}
              />

Now I want to generate the same type of JSON object from the table with the below fields;

table fields: id, parent_id, label

I have managed to get the following type of output as the response JSON object from the table using console.log(JSON.stringify(response));

{"data":[
{"id":1,"parent_id":0,"label":"ROOT","created_at":null,"updated_at":null},
{"id":2,"parent_id":1,"label":"Father 1","created_at":null,"updated_at":null},
{"id":3,"parent_id":1,"label":"Father 2","created_at":null,"updated_at":null},...

What is the best way to convert this output JSON to a similar format to my sample JSON used to populate the Treeview? or is there a better way to achieve the desired output using Treeview?

Any help would be highly appreciated.

0 Answers
Related