Looping through json array of objects to display unique property with all its data

Question

I am new to angular and need help for the below- I have a json data as follows in my json file:

{
  "records":
  [
    {
    "date":1619038000,
    "name":"Susan",
    "status":"available"
  },
  {
    "date":1419038000,
    "name":"Vinay",
    "status":"not available"
  },
  {
    "date":1419038000,
    "name":"Ajay",
    "status":"available"
  }
  ],
  "record2":[
    {
    "date":1419037000,
    "name":"Soumya",
    "status":"not available"
  },
  {
    "date":1326439320,
    "name":"Harsh",
    "status":"available"
  },
  {
    "date":1419031000,
    "name":"Gopi",
    "status":"available"
  }
  ]
}

this is my js file:

   angular.module("myApp",[]).controller("Control",function($scope,$http){
      $http.get('myData.json').
      success(function(data){
        $scope.tableData = data.records;

      });
    });

I want to display data in the table from the json in such a way that all data having the same "date" are grouped together and shown jst one date in the table.Could you pls help me with this.I want it as follows:

date name status 16th april susan available 17th april vinay not available ajay available

Its not an array of objects, its array inside array

Sajeetharan
– Sajeetharan

2017-04-14 18:29:26 +00:00
Commented Apr 14, 2017 at 18:29 — Sajeetharan
– Sajeetharan, Commented Apr 14, 2017 at 18:29

Banshi Lal Dangi · Accepted Answer · 2017-04-14 19:56:59Z

1

To show the result: GroupBy date, follow the below steps.

STEP 1: Add Moment JS library to your HTML file.

http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js

STEP 2: Update your controller file as below:

  var app = angular.module("myApp",[]);

 app.controller("Control",function($scope,$http){
   $http.get('myData.json').
       success(function(data){
                  $scope.tableData = data.records;
                });
});
app.filter('groupBy', function() {
  return _.memoize(function(items, field) {
        return _.groupBy(items, field);
    }
  );
});

STEP 3: To render the data add the following code to your HTML file.

<ul>
        <li ng-repeat="(date, persons) in tableData | groupBy:'date'">
                {{date * 1000 | date:"dd.MM.y"}}
                <ul>
                    <li ng-repeat="person in persons">
                        {{person.name}}
                    </li>
                </ul>
            </li>
 </ul>

Codepen Link

answered Apr 14, 2017 at 19:56

Banshi Lal Dangi

6753 silver badges11 bronze badges

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

2 Comments

Susanna Over a year ago

can you pls tell me what is .memoize in the controller?

Banshi Lal Dangi Over a year ago

Please refer following link to understand these 2 Underscore.js methods. underscorejs.org

Masud · Accepted Answer · 2017-04-14 18:32:25Z

0

You need to use 'ng-repeat' Here is a tutorial and examples for your guide https://www.w3schools.com/angular/ng_ng-repeat.asp

For date, here is some guidance https://www.w3schools.com/angular/ng_filter_date.asp

answered Apr 14, 2017 at 18:32

Masud

5756 silver badges6 bronze badges

Collectives™ on Stack Overflow

Looping through json array of objects to display unique property with all its data

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related