AngularJS ng-repeat from json string

Question

I am trying to find tasks from a project and display them in separate div .

Following json string is my data source which is within {{projects}} variable.

[{"_id":"200566","value":[{"name":"Inbox","pinned":false,"milestone-id":"","description":"","uncompleted-count":0,"id":"713888","complete":false,"private":false,"position":3999,"status":"reopened","projectId":"200566","projectName":"fastfy.com","DLM":null},{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":6,"id":"673437","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"200566","projectName":"fastfy.com","DLM":null}]},{"_id":"221840","value":[{"name":"Inbox","pinned":false,"milestone-id":"","description":"","uncompleted-count":0,"id":"800864","complete":false,"private":false,"position":3998,"status":"reopened","projectId":"221840","projectName":"The Crown","DLM":null},{"name":"General tasks","pinned":true,"milestone-id":"","description":"","uncompleted-count":3,"id":"751194","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"221840","projectName":"The Crown","DLM":null}]},{"_id":"203859","value":[{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":3,"id":"690722","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"203859","projectName":"mphosipalityconsulting.com","DLM":null}]},{"_id":"207043","value":[{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":1,"id":"700757","complete":false,"private":false,"position":4000,"status":"new","projectId":"207043","projectName":"Gloucester B&B & Pub","DLM":null}]}]

I have tried

        {{projects}}
        <li class="list-group-item" ng-repeat="p in projects">
            <div class="nm">
                {{p.value[$index].projectName}}
            </div>
            <div class="taskBtn">  
            <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#taskList{{post.id}}">[+]</button>
            </div>
            <div id="taskList{{post.id}}" class="collapse">
                {{p.value[$index].name}}

            </div>              
        </li>

This outputs following

Could you tell me how do i get the looping properly and get Something like

Project name : Task lists :

project name : tasks lists:

Project name : Task lists :

project name : tasks lists:

Are the tasks in the "value" array?

Anthony
– Anthony

2016-08-17 16:23:31 +00:00
Commented Aug 17, 2016 at 16:23 — Anthony
– Anthony, Commented Aug 17, 2016 at 16:23

Thalaivar · Accepted Answer · 2016-08-17 16:29:35Z

Use ng-repeat inside an ng-repeat

Your DOM

<!DOCTYPE html>
<html ng-app="App">

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>

  <body ng-controller="Proj">
    <ul ng-repeat="p in projects">     
      <ul>
        <li ng-repeat="item in p.value">
              {{item.name}}
        </li>
      </ul>
    </ul>
  </body>

</html>

Controller code:

angular.module('App', []).controller('Proj', function ($scope) {
    $scope.projects = [{"_id":"200566","value":[{"name":"Inbox","pinned":false,"milestone-id":"","description":"","uncompleted-count":0,"id":"713888","complete":false,"private":false,"position":3999,"status":"reopened","projectId":"200566","projectName":"fastfy.com","DLM":null},{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":6,"id":"673437","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"200566","projectName":"fastfy.com","DLM":null}]},{"_id":"221840","value":[{"name":"Inbox","pinned":false,"milestone-id":"","description":"","uncompleted-count":0,"id":"800864","complete":false,"private":false,"position":3998,"status":"reopened","projectId":"221840","projectName":"The Crown","DLM":null},{"name":"General tasks","pinned":true,"milestone-id":"","description":"","uncompleted-count":3,"id":"751194","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"221840","projectName":"The Crown","DLM":null}]},{"_id":"203859","value":[{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":3,"id":"690722","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"203859","projectName":"mphosipalityconsulting.com","DLM":null}]},{"_id":"207043","value":[{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":1,"id":"700757","complete":false,"private":false,"position":4000,"status":"new","projectId":"207043","projectName":"Gloucester B&B & Pub","DLM":null}]}];;   
});

http://plnkr.co/edit/4RaxuzA3YXRIG8LvPwlr?p=preview

N.A · Accepted Answer · 2016-08-17 16:34:26Z

0

This Nested ng-repeat can b your solution...

 <li class="list-group-item" ng-repeat="p in projects">
        <div class="nm">
            {{p.value[$index].projectName}}:
        <ul ng-repeat="t in p.value">
       <li>{{t.name}}</li>
        </ul>
        </div>
        <div class="taskBtn">  
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#taskList{{post.id}}">[+]</button>
        </div>
        <div id="taskList{{post.id}}" class="collapse">
            {{p.value[$index].name}}

        </div>              
    </li>

answered Aug 17, 2016 at 16:34

N.A

8555 gold badges13 silver badges34 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-repeat from json string

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related