CODEWITHSUNDEEP
angularjs
Jhon Caylog
Jhon Caylog

Reputation: 503

Angular js select specific data from json using date or filter it by date

I am new to angular js , how to select specific or certain data from json array.Return data from an array which date is equal to today , and also get data from json of this current week(all data of the current week), and also of the data of this current month. Thanks

$scope.Combination = [    
          { 
          "Name" : "HelloWorld",
          "Type" : "Phyton",
              "Date": "01/11/2018"
          },
          {
              "Name" : "HelloWorld",
          "Type" : "C#",
              "Date": "01/08/2018"
          },
          {
              "Name" : "HelloWorld",
          "Type" : "JS",
              "Date": "01/04/2018"
          },
          {
              "Name" : "HelloWorld",
          "Type" : "Ruby",
              "Date": "01/07/2018"
          },
          {
              "Name" : "HelloWorld",
          "Type" : "C",
              "Date": "01/010/2018"
          }  
      ];

Upvotes: 1

Views: 193

Answers (1)

Ritesh Ranjan
Ritesh Ranjan

Reputation: 1012

<!DOCTYPE html>
<html ng-app="ToDo">
<head>
<title>Create Angularjs To Do Application with demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
</head> 
<body>

<div ng-controller="todoController">

<ul>
    <li ng-repeat="todo in combinations|getCombinations ">
        {{todo.Date}}
    </li>
</ul>
{{name}}
</div>

<script>
  var app = angular.module('ToDo',[])

  app.controller('todoController',['$scope', function($scope){
    $scope.combinations = [       
          { 
          "Name" : "HelloWorld",
          "Type" : "Phyton",
              "Date": "01/11/2018"
          },
          {
              "Name" : "HelloWorld",
          "Type" : "C#",
              "Date": "01/08/2018"
          },
          {
              "Name" : "HelloWorld",
          "Type" : "JS",
              "Date": "01/04/2018"
          },
          {
              "Name" : "HelloWorld",
          "Type" : "Ruby",
              "Date": "01/07/2018"
          },
          {
              "Name" : "HelloWorld",
          "Type" : "C",
              "Date": "01/10/2018"
          }  
      ];
  }]);

  angular.module('ToDo').filter('getCombinations', function($filter) {
    return function (combinations) {

      var month_filtered_list = [];

      for (var i = 0; i < combinations.length; i++) {

        var thirty_days_ago = new Date().getTime() - 30*24*60*60*1000;
        var com_date = new Date(combinations[i]["Date"]).getTime();
        if (com_date >= thirty_days_ago) {
  	month_filtered_list.push(combinations[i]);
	
        }
      }
      return month_filtered_list;
    }
  });



</script>

</body>
</html>

Here you can use filter to show combination: For monthly combination:

  angular.module('ToDo').filter('getCombinations', function($filter) {
    return function (combinations) {

      var month_filtered_list = [];

      for (var i = 0; i < combinations.length; i++) {

        var thirty_days_ago = new Date().getTime() - 30*24*60*60*1000;
        var com_date = new Date(combinations[i]["Date"]).getTime();
        if (com_date >= thirty_days_ago) {
    month_filtered_list.push(combinations[i]);

        }
      }
      return month_filtered_list;
    }
  });

DOM looks like this

<tr ng-repeat="order in combinations|getCombinations">

Similarly you can do for the weak also by just changing the

var thirty_days_ago = new Date().getTime() - 30*24*60*60*1000;

to

var seven_days_ago = new Date().getTime() - 7*24*60*60*1000;

for present day:

    .filter('getTodayCombinations', function() {
      return function (combinations) {

        var today_filtered_list = [];

        for (var i = 0; i < combinations.length; i++) {

          var com_date = new Date(combinations[i].Date).getTime();

          if (com_date == new Date().getTime()) {
            today_filtered_list.push(combinations[i]);
          }
        }
        return month_filtered_list;
      }

  });

Upvotes: 2

Related Questions