API end point output JSON filter in AngularJS

Question

I have an end point API. There are four objects with keys, id, group, name and date_modified. I am using AngularJS 1 to call the API and print the output. Now, there are few multiple entries, where group and name are same but date_modified is different.

To show the output, I want to filter it in a way that if group and name are same in an object then it will take the object where date_modified value is highest and ignore the others.

End point API JSON structure :-

[
    {

        "id": 1,
        "group": "AB",
        "name": "John",
        "date_modified": "2018-01-30T12:01:47Z"

    },
    {

        "id": 2,
        "group": "BC",
        "name": "Alex",
        "date_modified": "2018-01-30T12:04:43Z"

    },
    {

        "id": 3,
        "group": "AB",
        "name": "John",
        "date_modified": "2018-01-29T12:00:02Z"

    },
    {

        "id": 4,
        "group": "CD",
        "name": "Peter",
        "date_modified": "2018-01-29T12:00:07Z"

    }
]

services.js :-

app.factory('Instlistdata', function($resource) {

    var list_data = 'http://127.0.0.1:8000/lists/?format=json' ;



    return $resource(list_data, {}, {

      query: {
          method: 'GET',
          isArray:true,
        }

    });


});

Controller.js :-

app.controller('dasboardController', ['$rootScope', '$scope', '$http', '$window', 'Instlistdata', function($rootScope, $scope, $http, $window, Instlistdata) {


    $scope.lists = []; 

    Instlistdata.query({},function(data) {

    $scope.lists = data;

    console.log(data);

    });

}]);

Now, it is giving me the JSON output in console. But I want filtered output, i.e

[
    {

        "id": 1,
        "group": "AB",
        "name": "John",
        "date_modified": "2018-01-30T12:01:47Z"

    },
    {

        "id": 2,
        "group": "BC",
        "name": "Alex",
        "date_modified": "2018-01-30T12:04:43Z"

    },
    {

        "id": 3,
        "group": "CD",
        "name": "Peter",
        "date_modified": "2018-01-29T12:00:07Z"

    }
]

"date_modified": "2018-01-30T12:01:47Z" is higher that the "date_modified": "2018-01-29T12:00:02Z" where "group" : "AB" and "name" : "John" . You can see we ignored the other one.

Please clarify you question. You want this to be done with js code (ie angular service or controller) or do you want this implemented via an angular filter? — Varvarigos Emmanouil
– Varvarigos Emmanouil, Commented Jan 31, 2018 at 10:20

Varvarigos Emmanouil · Accepted Answer · 2018-02-01 10:05:09Z

1

You can achieve this using something like the following code:

var array = [
    {

        "id": 1,
        "group": "AB",
        "name": "John",
        "date_modified": "2018-01-30T12:01:47Z"

    },
    {

        "id": 2,
        "group": "BC",
        "name": "Alex",
        "date_modified": "2018-01-30T12:04:43Z"

    },
    {

        "id": 3,
        "group": "AB",
        "name": "John",
        "date_modified": "2018-01-29T12:00:02Z"

    },
    {

        "id": 4,
        "group": "CD",
        "name": "Peter",
        "date_modified": "2018-01-29T12:00:07Z"

    }
];

function keep(el, subArray) {
  var found = subArray.filter(function(current) {
    return current.id != el.id && current.name == el.name && current.group == el.group;
  });

  if (found && found.length > 0) {
    var keepThis = true
    var date1 = new Date(el.date_modified)
    found.forEach(function(foundEl) {
      var date2 = new Date(foundEl.date_modified)
      keepThis = date1.getTime() > date2.getTime() && el.id < foundEl.id
    })
    return keepThis
  } else {
    return true
  }
}

var filteredArray = array.filter(function(el, index, arr) {
  return keep(el, arr)
})

In this snippet if you replace array variable with the fetched data (i.e.: $scope.lists in your controller) you will have the desired output. Keep in mind though that I did not change the id property since this is something that you usually do not change. So my output is:

[
  {
    "id": 1,
    "group": "AB",
    "name": "John",
    "date_modified": "2018-01-30T12:01:47Z"
  },
  {
    "id": 2,
    "group": "BC",
    "name": "Alex",
    "date_modified": "2018-01-30T12:04:43Z"
  },
  {
    "id": 4,
    "group": "CD",
    "name": "Peter",
    "date_modified": "2018-01-29T12:00:07Z"
  }
]

edited Feb 1, 2018 at 10:05

answered Jan 31, 2018 at 11:29

Varvarigos Emmanouil

7574 silver badges14 bronze badges

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

3 Comments

Codieroot Over a year ago

It is actually checking the first two objects only. If there are multiple objects (more than 2) with same group and name, then it ignores the others.

Codieroot Over a year ago

To check this, add one more object, like { "id": 5, "group": "AB", "name": "John", "date_modified": "2018-01-30T12:05:47Z } , you can see that it is still printing the object with id 5

Varvarigos Emmanouil Over a year ago

Since we handle timestamps this is case should be rare. I fixed it regardless.

Collectives™ on Stack Overflow

API end point output JSON filter in AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related