0

I need help displaying json whos structure is like this in angular-js selector. I am a new to angular and and help displaying this as a drop down and making it a searchable is welcomed.

[

    {
        "id":1,
        "name":"something1",
        "displayName":"something1",
        "children":[
            {
                "id":9,
                "name":"something1Child1",
                "displayName":"something1/ something1Child1",
                "children":[
                ],
                "typeId":1,
                "parentId":1
            },
            {
                "id":10,
                "name":"something1Child2",
                "displayName":"something1 / something1Child2",
                "children":[
                ],
                "typeId":1,
                "parentId":1
            }
        ]
  }

  {
        "id":2,
        "name":"something2",
        "displayName":"something2",
        "children":[
        ]
  }

]
Improve this question
10
  • 1
    With which part of your code are you having trouble? Commented Jan 6, 2014 at 16:44
  • I am having problems displaying that json like a drop down. I don't know how to do it. Maybe using ng-options or something? Commented Jan 6, 2014 at 16:46
  • possible duplicate of How can I populate a select dropdown list from a JSON feed with AngularJS? Commented Jan 6, 2014 at 16:49
  • I am stuck on this for over 16 hours. Like I sad I am new at angular. I made this json display in a unsorted list but I also need a option to search that list something like a typeahead and I don't have any clue how to do it. Commented Jan 6, 2014 at 16:50
  • @crush I know how to display first level of json. I need children to display also. Commented Jan 6, 2014 at 16:52

2 Answers 2

Reset to default
1

You just need a nested ng-repeat for the childrens. 

<span ng-repeat="something in somethings"> 
  <h3>{{ something.name }}</h3>
  <select>
    <option ng-repeat="child in something.children"> {{ child.name }}</option>
  </select>
</span>

I am guessing how you want to display them but i hope it can give you some ideas. Here is a JsBin

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

1 Comment

I need it displayed like a tree. All in drop down. Thank you for effort.
0

Does this JSFiddle do what you want? It takes your nested structure and makes a flat structure from it. It will then use that flat structure for display.

<select ng-model="selected">
    <option ng-repeat="option in tree" ng-bind-html-unsafe="option.displayName" value="{{$index}}">{{ option.displayName }}</option>
</select>

$scope.tree = [];
function buildTree(data, depth) {
    for(d in data) {
        var c = angular.copy(data[d]); //copy object
        delete c['children'];  //we dont want to copy children
        c.displayName = Array(depth*4).join("&nbsp;") + c.displayName;
        $scope.tree.push(c);
        buildTree(data[d].children, depth+1);
    }
}
buildTree($scope.data, 0);

I use ng-bind-html-unsafe because you wanted to display it like a tree, I feel like that is best accomplished by adding whitespace before the nest option, which is done with the &nbsp;.

Improve this answer

Comments