Sort Array of object having nested childs in Angular (7)

Question

I was trying to sort the response payload base on the object field "sortOrderNumber" which contains the inner child.

Response Payload:

{   
    "content":
    [ 
        {
            "eserviceSettings":[ 
            { 
               "serviceName":"Licenses",
               "sortOrderNumber":5,
               "eserviceSettings":[ 
                  { 
                     "serviceName":"Manning Licenses",
                     "sortOrderNumber":2,
                     "eserviceSettings":[ 
                        { 
                           "serviceName":"Enquiry on Application Status",
                           "sortOrderNumber":2,
                           "eserviceSettings":[ 
                           ]
                        },
                        { 
                           "serviceName":"Enquiry of Manning Licence and Submission",
                           "sortOrderNumber":1,
                           "eserviceSettings":[ 
                           ]
                        }
                     ]
                  },
                  { 
                     "serviceName":"Craft Licenses",
                     "sortOrderNumber":1,
                     "eserviceSettings":[ 
                        { 
                           "serviceName":"Application for New Harbour Craft Licence",
                           "sortOrderNumber":2,
                           "eserviceSettings":[ 
                           ]
                        },
                        { 
                           "serviceName":"Application for New Pleasure Craft Licence",
                           "sortOrderNumber":1,
                           "eserviceSettings":[ 
                           ]
                        }
                     ]
                  },
                  { 
                     "serviceName":"Craft Inspection Booking",
                     "sortOrderNumber":5,
                     "eserviceSettings":[ 
                     ]
                  }
               ]
            }
            ]
        }
    ]
}

I tried the below code

const childEservices = content[0].eserviceSettings;
this.postLoginDashboardData = allObjs.concat(childEservices);
this.postLoginDashboardData.sort((a: any, b: any) =>  a.sortOrderNumber - b.sortOrderNumber);
      this.postLoginDashboardData.forEach( (element) => {
        element.eserviceSettings.sort((a: any, b: any) =>  a.sortOrderNumber - b.sortOrderNumber);
      });

The result after After sorting is below where in the inner childs are not getting sorted.Not sure where i am missing.

{   
        "content":
        [ 
            {
                "eserviceSettings":[ 
                { 
                   "serviceName":"Licenses",
                   "sortOrderNumber":5,
                   "eserviceSettings":[
                    { 
                         "serviceName":"Craft Licenses",
                         "sortOrderNumber":1,
                         "eserviceSettings":[ 
                            { 
                               "serviceName":"Application for New Harbour Craft Licence",
                               "sortOrderNumber":2,
                               "eserviceSettings":[ 
                               ]
                            },
                            { 
                               "serviceName":"Application for New Pleasure Craft Licence",
                               "sortOrderNumber":1,
                               "eserviceSettings":[ 
                               ]
                            }
                         ]
                      },
                      { 
                         "serviceName":"Manning Licenses",
                         "sortOrderNumber":2,
                         "eserviceSettings":[ 
                            { 
                               "serviceName":"Enquiry on Application Status",
                               "sortOrderNumber":2,
                               "eserviceSettings":[ 
                               ]
                            },
                            { 
                               "serviceName":"Enquiry of Manning Licence and Submission",
                               "sortOrderNumber":1,
                               "eserviceSettings":[ 
                               ]
                            }
                         ]
                      }
                      ,
                      { 
                         "serviceName":"Craft Inspection Booking",
                         "sortOrderNumber":5,
                         "eserviceSettings":[ 
                         ]
                      }
                   ]
                }
                ]
            }
        ]
    }

Any help to achive sorting in better way with minimal code. The result i was trying to get is below

{   
    "content":
    [ 
        {
            "eserviceSettings":[ 
            { 
               "serviceName":"Licenses",
               "sortOrderNumber":5,
               "eserviceSettings":[
                { 
                     "serviceName":"Craft Licenses",
                     "sortOrderNumber":1,
                     "eserviceSettings":[ 
                        { 
                           "serviceName":"Application for New Pleasure Craft Licence",
                           **"sortOrderNumber":1,**
                           "eserviceSettings":[ 
                           ]
                        },
                        { 
                           "serviceName":"Application for New Harbour Craft Licence",
                           **"sortOrderNumber":2,**
                           "eserviceSettings":[ 
                           ]
                        }
                     ]
                  },
                  { 
                     "serviceName":"Manning Licenses",
                     "sortOrderNumber":2,
                     "eserviceSettings":[
                        { 
                           "serviceName":"Enquiry of Manning Licence and Submission",
                           **"sortOrderNumber":1,**
                           "eserviceSettings":[ 
                           ]
                        },                       
                        { 
                           "serviceName":"Enquiry on Application Status",
                           **"sortOrderNumber":2,**
                           "eserviceSettings":[ 
                           ]
                        }
                     ]
                  },
                  ,
                  { 
                     "serviceName":"Craft Inspection Booking",
                     "sortOrderNumber":5,
                     "eserviceSettings":[ 
                     ]
                  }
               ]
            }
            ]
        }
    ]
}

Thank you in advance.

Raj Shah · Accepted Answer · 2020-01-31 07:26:39Z

2

After sorting the first time use the following:

function sortRecursive(data) {
  if (data[0]) {
    data.forEach( (element) => {
      if (element.eserviceSettings) {
        element.eserviceSettings.sort((a, b) =>  a.sortOrderNumber - b.sortOrderNumber);
        sortRecursive(element.eserviceSettings);
      }
    });
  }
}

answered Jan 31, 2020 at 7:26

Raj Shah

8569 silver badges16 bronze badges

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

1 Comment

Raj Shah Over a year ago

Also, the ideal tag for this question would be JavaScript as this doesn't have much to do with Angular

Collectives™ on Stack Overflow

Sort Array of object having nested childs in Angular (7)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related