TypeScript / JS -- sort an array of nested objects based on a property common to all objects

Question

I'm learning TypeScript and JS and struggling to solve multiple problems. One of them is this, that I have at hand. Say, I have an array of Application objects. Each Application object has this kind of a nested structure:

Application
|
----[Document Type]
---------|
--------------[Document]
------------------|
------------------------Metadata

(Each Application has an array of Document Type. Each Document Type has an array of Document. Each Document has a Metadata inside it)

All the three objects types -- Application, Document Type, Document...have a property called name inside them. I want to sort the entire array of Application objects (and recursively the nested objects as well), based on ascending order of the name property of each object. I had been trying multiple examples, but those are all sorting only the root level objects (Application) and not the nested objects.

Here is one such example I tried:

var simplePropertyRetriever = function(obj:any) {
      return obj.name;
     };

function sortArrayByName(propertyRetriever, arr:Application[]) {
   arr.sort(function (a, b) {
        var valueA = propertyRetriever(a);
        var valueB = propertyRetriever(b);

        if (valueA < valueB) {
            return -1;
        } else if (valueA > valueB) {
            return 1;
        } else {
            return 0;
        }
    });

  };

Can anybody please advise how to do this?
My sample JSON is this (I have arranged the objects in descending order here, to better explain my use case):

[
 {
  "name": "Application 2",
  "children": [
   {
    "name": "Operations Manual",
    "children": [
     {
      "name": "2nd-opsManual-app1",
      "metadata": {
       "size": 56,
       "fileExtension": "docx"
      }
     },
     {
      "name": "1st-opsManual-app1",
      "metadata": {
       "size": 56,
       "fileExtension": "pdf"
      }
     }
    ]
   },
   {
    "name": "Interface Contracts",
    "children": [
     {
      "name": "2nd-IntContracts-app1",
      "metadata": {
       "size": 56,
       "fileExtension": "docx"
      }
     },
     {
      "name": "1st-IntContracts-app1",
      "metadata": {
       "size": 56,
       "fileExtension": "pdf"
      }
     }
    ]
   }
  ]
 },
 {
  "name": "Application 2",
  "children": [
   {
    "name": "User Manual",
    "children": [
     {
      "name": "2nd-userManual-app2",
      "metadata": {
       "size": 56,
       "fileExtension": "docx"
      }
     },
     {
      "name": "1st-userManual-app2",
      "metadata": {
       "size": 56,
       "fileExtension": "pdf"
      }
     }
    ]
   },
   {
    "name": "System Design",
    "children": [
     {
      "name": "2nd-SystemDesign-app2",
      "metadata": {
       "size": 56,
       "fileExtension": "docx"
      }
     },
     {
      "name": "1st-SystemDesign-app2",
      "metadata": {
       "size": 56,
       "fileExtension": "pdf"
      }
     }
    ]
   }
  ]
 }
]

Nina Scholz · Accepted Answer · 2019-10-27 14:09:22Z

1

You could iterate the array and take the children for a new sorting.

function sort(array) {
    array.forEach(({ children = [] }) => sort(children));
    array.sort((a, b) => a.name.localeCompare(b.name));
}

var data = [{ name: "Application 2", children: [{ name: "Operations Manual", children: [{ name: "2nd-opsManual-app1", metadata: { size: 56, fileExtension: "docx" } }, { name: "1st-opsManual-app1", metadata: { size: 56, fileExtension: "pdf" } }] }, { name: "Interface Contracts", children: [{ name: "2nd-IntContracts-app1", metadata: { size: 56, fileExtension: "docx" } }, { name: "1st-IntContracts-app1", metadata: { size: 56, fileExtension: "pdf" } }] }] }, { name: "Application 2", children: [{ name: "User Manual", children: [{ name: "2nd-userManual-app2", metadata: { size: 56, fileExtension: "docx" } }, { name: "1st-userManual-app2", metadata: { size: 56, fileExtension: "pdf" } }] }, { name: "System Design", children: [{ name: "2nd-SystemDesign-app2", metadata: { size: 56, fileExtension: "docx" } }, { name: "1st-SystemDesign-app2", metadata: { size: 56, fileExtension: "pdf" } }] }] }];

sort(data);

console.log(data);

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered Oct 27, 2019 at 14:09

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

1 Comment

Tatha Over a year ago

Thanks a lot...I'm going to use this snippet. Its so much more readable and concise. Is there a way this solution could be extended to take the parameter name as an argument? (so that it can be used for any other parameter that's present in all the objects, just like name)

SamVK · Accepted Answer · 2019-10-27 14:26:38Z

Your code is working, but you're only doing a shallow sort. If you need to also sort each application object's children, you can recursively call sortArrayByName on each application object's children (if they exist).

var simplePropertyRetriever = function(obj) {
  return obj.name;
 };

function sortArrayByName(propertyRetriever, arr) {
 arr.forEach(function(obj) {
      if (Array.isArray(obj.children)) {
        sortArrayByName(propertyRetriever, obj.children);
      }
 });
 arr.sort(function (a, b) {
      var valueA = propertyRetriever(a);
      var valueB = propertyRetriever(b);

      if (valueA < valueB) {
          return -1;
      } else if (valueA > valueB) {
          return 1;
      } else {
          return 0;
      }
  });
};

const data = [
 {
  "name": "Application 2",
  "children": [
   {
    "name": "Operations Manual",
    "children": [
     {
      "name": "2nd-opsManual-app1",
      "metadata": {
       "size": 56,
       "fileExtension": "docx"
      }
     },
     {
      "name": "1st-opsManual-app1",
      "metadata": {
       "size": 56,
       "fileExtension": "pdf"
      }
     }
    ]
   },
   {
    "name": "Interface Contracts",
    "children": [
     {
      "name": "2nd-IntContracts-app1",
      "metadata": {
       "size": 56,
       "fileExtension": "docx"
      }
     },
     {
      "name": "1st-IntContracts-app1",
      "metadata": {
       "size": 56,
       "fileExtension": "pdf"
      }
     }
    ]
   }
  ]
 },
 {
  "name": "Application 2",
  "children": [
   {
    "name": "User Manual",
    "children": [
     {
      "name": "2nd-userManual-app2",
      "metadata": {
       "size": 56,
       "fileExtension": "docx"
      }
     },
     {
      "name": "1st-userManual-app2",
      "metadata": {
       "size": 56,
       "fileExtension": "pdf"
      }
     }
    ]
   },
   {
    "name": "System Design",
    "children": [
     {
      "name": "2nd-SystemDesign-app2",
      "metadata": {
       "size": 56,
       "fileExtension": "docx"
      }
     },
     {
      "name": "1st-SystemDesign-app2",
      "metadata": {
       "size": 56,
       "fileExtension": "pdf"
      }
     }
    ]
   }
  ]
 }
];

sortArrayByName(simplePropertyRetriever, data);

console.log(data);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Thanks a lot. It was rather stupid of me to be not doing anything for recursion really..and expecting it work recursively.

Collectives™ on Stack Overflow

TypeScript / JS -- sort an array of nested objects based on a property common to all objects

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related