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": "[email protected]",
            "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": "[email protected]",
            "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": "[email protected]",
        "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": "[email protected]",
        "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": "[email protected]",
        "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": "[email protected]",
        "displayName": "Test Bookmark",
        "userid": "DIN2323",
        "contributorCount": 1,
        "isInternal": 0,
        "requiresHttpAuth": 0
    }
    ]

}];
});

Output:

is names an array or object?

Pavan Teja
– Pavan Teja

2016-02-27 09:43:02 +00:00
Commented Feb 27, 2016 at 9:43 — Pavan Teja
– Pavan Teja, Commented Feb 27, 2016 at 9:43

Pavan Teja · Accepted Answer · 2016-02-27 17:14:12Z

2

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

edited Feb 27, 2016 at 17:14

answered Feb 27, 2016 at 9:51

Pavan Teja

3,2021 gold badge18 silver badges22 bronze badges

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

13 Comments

Gobinath M Over a year ago

But extra null list item was created in this example

Gobinath M Over a year ago

And how if description null item should be in top the list item

Pavan Teja Over a year ago

@GobinathMahalingam check the updated jsbin. Corrected the format and ordered empty discription nodes top.

Gobinath M Over a year ago

Thanks For rply . pls guide me how to add logic ( If description comes as "one > two" like as "two" was created a sub folder of "one" and "title" should be created as "document" of two. ) from your script

Gobinath M Over a year ago

In this script If descriptions should be empty created a list but it also created a empty <ul>

|

Chris Hermut · Accepted Answer · 2016-02-27 09:16:40Z

0

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.

answered Feb 27, 2016 at 9:16

Chris Hermut

1,7564 gold badges17 silver badges32 bronze badges

2 Comments

Gobinath M Over a year ago

Thanks for rply . We are planning to not use any plugins .

Chris Hermut Over a year ago

Cool man. Good luck then. You might just want to create a view model and use it to populate your view. I would do it as a service to keep it clean.

Collectives™ on Stack Overflow

How to create simple UI tree structure using JSON data

2 Answers 2

13 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related