display list from complex json using angular

Question

I have this JSON (I did not create it and can not change it)

{"tags": [
    {
      "title": "news",
      "options": [
          {
            "title": "important",
          },
          {
            "title": "less important",
          }
         ]
    },
    {
       "title": "entertainment",
       "options": [
           {
              "title": "entertainment",
           }
          ]
     }

I would like to display it as a list, where if a certain title hasonly one option then the title should be displayed in the list, and if a title has more than one item in options, then the main title should be displayed and the options titles should also be displayed. the final result (according to the above example) should display:

 <ul>
     <li>news<ul>
                <li>important</li>
                <li>less important</li>
             </ul>
        </li>
    <li>entertainment</li>
  </ul>

how can I do this in angularJS?

docs.angularjs.org/guide/templates

Shilly
– Shilly

2016-05-09 12:41:10 +00:00
Commented May 9, 2016 at 12:41 — Shilly
– Shilly, Commented May 9, 2016 at 12:41

Davide Lorenzo MARINO · Accepted Answer · 2016-05-09 12:41:50Z

3

You can try with something like that if myList is the name that you use in the $scope for the json object. Basically is an ng-repeat with an inner ng-repeat

<ul ng-repeat="element in myList.tags">
    <li>
        {{element.title}}
        <ul ng-repeat="innerElement in element.options">
            <li>{{innerElement.title}}</li>
        </ul>
     </li> 
</ul>

answered May 9, 2016 at 12:41

Davide Lorenzo MARINO

27k4 gold badges45 silver badges58 bronze badges

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

Comments

Rakesh Chand · Accepted Answer · 2016-05-09 12:52:35Z

1

I am assuming your json file is stored in a variable called result

<ul ng-repeat = "tg in result.tags">
   <li ng-if="tg.options.length > 1">{{tg.title}}
      <ul ng-repeat ="innerElement in tg.options" >
         <li>{{innerElement.title}}</li>
      </ul>
   </li>
   <li ng-if="tg.options.length==1">{{tg.title}}</li>
</ul>

edited May 9, 2016 at 12:52

answered May 9, 2016 at 12:45

Rakesh Chand

3,1131 gold badge25 silver badges43 bronze badges

Comments

Shai Kimchi · Accepted Answer · 2016-05-09 13:00:48Z

1

Thnx, both above suggestions helped clear out the solution. I needed to nest two ng-repeat loops together and apply an ng-if to the inner loop.

I ended up with this soultion:

<ul> <li ng-repeat="x in myData.tags"> {{x.title}} <ul ng-repeat="y in x.options" ng-if="x.options.length>1"> {{y.title}} </ul> </li> </ul>

answered May 9, 2016 at 13:00

Shai Kimchi

8061 gold badge7 silver badges23 bronze badges

Collectives™ on Stack Overflow

display list from complex json using angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related