CODEWITHSUNDEEP
javascriptangularjsjson
Sajan Nagpal
Sajan Nagpal

Reputation: 13

Angular Js ng-repeat iterating over JSON

I am new to stackoverflow, please correct my mistakes.

Following is my JSON:

newTodo = {
            title: "task 1",
            cat: "category 1",
        };

Similarly 

newTodo = {
            title: "task 2",
            cat: "category 1",
        }; 


        newTodo = {
            title: "task 3",
            cat: "category 3",
        };

Now in my HTML, how should I write code like:

<li ng-repeat="todo in todos">

            {{todo.title}}
            {{todo.cat}}

</li>

But above is wrong, I want tasks to be shown category wise like:

category 1: task list category 2: task list

Please help. Please tell me if question is not clear.

Upvotes: 1

Views: 77

Answers (4)

Amila Dulanjana
Amila Dulanjana

Reputation: 1914

create a component called todoList

angular.
    module('TodoApp').
    component('todoList', {
      template:
        '<ul>' +
          '<li ng-repeat="newTodo in $ctrl.newTodos ">' +
             '<span>{{newTodo .title}}</span>' +
              '<p>{{newTodo .cat}}</p>' +
          '</li>' +
        '</ul>',
    controller: function TodoListController() {
      this.newTodos = [
      {
        title: "task 2",
        cat: "category 1"
      }, {
         title: "task 2",
        cat: "category 1"
      }
    ];
  }
});

Then create view file like this

<body ng-app="TodoApp">      
   < todo-list></todo-list>
</body>

Upvotes: 0

Weedoze
Weedoze

Reputation: 13943

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.todos = [{
    "title": "Task1",
    "cat": "Cat1"
  }, {
    "title": "Task2",
    "cat": "Cat1"
  }, {
    "title": "Task1",
    "cat": "Cat2"
  }];

  var reduced = {};

  $scope.todos.map(function(item) {
    reduced[item.cat] = reduced[item.cat] || [];
    reduced[item.cat].push(item.title);
  });

  $scope.reducedOutput = reduced;
});
li{
 color: red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
 
  <ul ng-repeat="(key, value) in reducedOutput">
    {{key}}
    <li ng-repeat="title in value">{{title}}</li>
  </ul>

</div>

Upvotes: 3

error505
error505

Reputation: 1216

You can write it like this:

$scope.newToDo = {
            title: "task 2",
            cat: "category 1",
        };

And than in html 

<li ng-repeat="todo in newToDo ">    
   {{todo.title}}
   {{todo.cat}}    
</li>

Or in Table:

<table>
    <tr ng-repeat="todo in newToDo">
    <td>{{todo.title}}:<span style="font-weight: bold"> {{todo.cat}}</span></td>
      </tr>
</table>

Upvotes: 0

Jigar7521
Jigar7521

Reputation: 1579

You can make json like : 

var allTask = [
                {
                cat: 'category 1'
                task : { title: "task 1", title: "task 2", title: "task 3"}
                },
                {
                cat: 'category 2'
                task : { title: "task 1", title: "task 2", title: "task 3"}
                }
        ]

Upvotes: 0

Related Questions