How to create simple UI tree structure using JSON data

Question

In JSON Description field is empty it should be created a root element and placed to top of the list. If description filed is not empty the description name should be created folder name and title should be a document of the folder. When same description name is coming again the title should be created a document of same folder description.

Root Doc 1(This is for description field should be empty)

Root Doc2

Folder 1 (if description name not empty created as folder name as description and created doc1.1 as title)

Doc 1.1

Doc 1.2 (if same description name like Folder 1 is coming again the description should not be created as folder and created as document like Doc1.2 as matched description)

Folder 2

Doc 2.1

Doc 2.2

HMTL File:

<div ng-app="myApp" ng-controller="namesCtrl">

<ul ng-repeat="x in names">
<li ng-repeat="y in x.bookmarks" > 
    <span ng-if="y.description ==''">{{y.title}}</span>
    <span ng-if="y.description !==''">{{y.description}}
    <ul>
    <li>{{y.title}}</li>
    </ul>
    </span>
  </li>

</ul>

</div>

JS File:

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [{
    "description": "Testing File",
    "totalCount": 6,
    "bookmarks": [{
            "title": "Google",
            "link": "https://www.google.co.in",
            "description": "Health Care",
            "id": "3ee078ae-0f2e-48bf-9acc-535a753513d7",
            "tags": [
                "care", "child", "health"
            ],
            "createdDate": "Thu, 25 Feb 2016 08:23:01 -0600",
            "date": "Thu, 25 Feb 2016 09:32:53 -0600",
            "dateMillis": "1456414373315",
            "author": "test@gmail.com",
            "displayName": "Test Bookmark",
            "userid": "DIN2323",
            "contributorCount": 1,
            "isInternal": 0,
            "requiresHttpAuth": 0
        },

        {
            "title": "Test Construction1",
            "link": "http://google.com",
            "description": "",
            "id": "306dac71-a602-4e47-9b97-2cde7e72f76b",
            "tags": [
                "con", "concrete", "construction"
            ],
            "createdDate": "Thu, 25 Feb 2016 05:57:23 -0600",
            "date": "Thu, 25 Feb 2016 08:25:46 -0600",
            "dateMillis": "1456410346467",
            "author": "test@gmail.com",
            "displayName": "Test Bookmark",
            "userid": "DIN2323",
            "contributorCount": 1,
            "isInternal": 0,
            "requiresHttpAuth": 0
        },
        {
        "title": "Project EA TEST 1",
        "link": "http://sample.com",
        "description": "",
        "id": "5e19e314-ddaf-4041-a516-8fea14b1e90b",
        "tags": [
            "1.1.concrete", "1.construction"
        ],
        "createdDate": "Thu, 25 Feb 2016 00:21:17 -0600",
        "date": "Thu, 25 Feb 2016 06:17:39 -0600",
        "dateMillis": "1456402659864",
        "author": "test@gmail.com",
        "displayName": "Test Bookmark",
        "userid": "DIN2323",
        "contributorCount": 2,
        "isInternal": 0,
        "requiresHttpAuth": 0
    }, {
        "title": "Project EA TEST 3",
        "link": "http://sample.com",
        "description": "Construction",
        "id": "9c31fdb4-bd83-4679-8c6c-66ae93d5db61",
        "tags": [
            "construction-concrete"
        ],
        "createdDate": "Thu, 25 Feb 2016 00:18:17 -0600",
        "date": "Thu, 25 Feb 2016 00:18:17 -0600",
        "dateMillis": "1456381097393",
        "author": "test@gmail.com",
        "displayName": "Test Bookmark",
        "userid": "DIN2323",
        "contributorCount": 1,
        "isInternal": 0,
        "requiresHttpAuth": 0
    }, {
        "title": "Test Construction",
        "link": "https://google.com",
        "description": "Construction",
        "id": "46c20ef9-4455-4248-a21e-6299bd22ba0b",
        "tags": [
            "care", "health"
        ],
        "createdDate": "Wed, 24 Feb 2016 09:27:20 -0600",
        "date": "Thu, 25 Feb 2016 06:33:53 -0600",
        "dateMillis": "1456403633944",
        "author": "test@gmail.com",
        "displayName": "Test Bookmark",
        "userid": "DIN2323",
        "contributorCount": 1,
        "isInternal": 0,
        "requiresHttpAuth": 0
    }, {
        "title": "Test Connection",
        "link": "https://www.google.com",
        "description": "Education",
        "id": "6952bada-567b-47a5-a480-4c5394e694c2",
        "tags": [
            "manufacturing", "roofing"
        ],
        "createdDate": "Wed, 24 Feb 2016 09:23:52 -0600",
        "date": "Wed, 24 Feb 2016 09:23:52 -0600",
        "dateMillis": "1456327432494",
        "author": "test@gmail.com",
        "displayName": "Test Bookmark",
        "userid": "DIN2323",
        "contributorCount": 1,
        "isInternal": 0,
        "requiresHttpAuth": 0
    }
    ]

}];
});

Output:

Answer 1

get the unique description names and then use two ng-repeat loops. use unique descriptions in outer loop and in inner loop filter all bookmarks using outer loop value.

you can check the implementation here

Answer 2

Instead of creating a custom logic for that particular scenario you might want to have a look at https://github.com/angular-ui-tree/angular-ui-tree. I think it has everything you need.