Find an item in object by filter

Question

I have the following object:

lstMsg = {
  "count": 6,
  "next": null,
  "previous": null,
  "results": [{
      "id": 3,
      "sender": 2,
      "receiver": {
        "id": 4,
        "username": "ghazan",
        "first_name": "ghazan",
        "last_name": "ghazan"
      },
      "title": "salam",
      "body": "reza khoobi",
      "created_time": "20-6-1394 15:42:34.647251"
    },
    {
      "id": 2,
      "sender": 2,
      "receiver": {
        "id": 4,
        "username": "ghazan",
        "first_name": "ghazan",
        "last_name": "ghazan"
      },
      "title": "reis",
      "body": "salam reis",
      "created_time": "20-6-1394 15:41:49.512305"
    },
    {
      "id": 1,
      "sender": 2,
      "receiver": {
        "id": 4,
        "username": "ghazan",
        "first_name": "ghazan",
        "last_name": "ghazan"
      },
      "title": "shaftan",
      "body": "saalam",
      "created_time": "20-6-1394 15:41:38.626508"
    }
  ]
}

I'm trying to find a specific item (i.e item with id = 2) and I'm using filter in javascript:

showMessage = function(msg_id) {
  var found = $filter('filter')(lstMsg.results, {
    id: msg_id
  }, true);
  result = found[0];
  message = result.body;
  title = result.title;
}

But it always returns the first item, no matter which id I'm looking for.

I'm wondering where am I doing wrong?

@DannyFardyJhonstonBermúdez Yes. But if filters does what it's suppose to do, then there will be just one item in found — Ghasem
– Ghasem, Commented Sep 20, 2015 at 19:03
works fine for me pasting this in plunker. Not sure why you have so many global variables. Create a demo that replicates issue — charlietfl
– charlietfl, Commented Sep 20, 2015 at 19:04
@AlexJolig You can filter objects by using filter function in plain javascript. — Danny Fardy Jhonston Bermúdez
– Danny Fardy Jhonston Bermúdez, Commented Sep 20, 2015 at 19:08
@DannyFardyJhonstonBermúdez yes you can but $filter also works as shown..with no changes. Something else is wrong — charlietfl
– charlietfl, Commented Sep 20, 2015 at 19:10

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2015-09-21 14:35:07Z

In Javascript you can filter in array by using filter function in arrays.

In Angularjs's function inside a controller.

$scope.lstMsg = [{},{},{}]; // Array of objects.
$scope.search = function (value) {
    return $scope.lstMsg.results.filter(function (e) { // Where e is equal an object of $scope.lstMsg array.
        return e.id == value;
    });
};

The function above will return an array of an object that matches with the filter function.

By using:

$scope.found = $scope.search(msg_id)[0]; // $scope.found is the object properly.

I've made a first demo using plain javascript.

(function() {
  var lstMsg = {
    "count": 6,
    "next": null,
    "previous": null,
    "results": [{
      "id": 3,
      "sender": 2,
      "receiver": {
        "id": 4,
        "username": "ghazan",
        "first_name": "ghazan",
        "last_name": "ghazan"
      },
      "title": "salam",
      "body": "reza khoobi",
      "created_time": "20-6-1394 15:42:34.647251"
    }, {
      "id": 2,
      "sender": 2,
      "receiver": {
        "id": 4,
        "username": "ghazan",
        "first_name": "ghazan",
        "last_name": "ghazan"
      },
      "title": "reis",
      "body": "salam reis",
      "created_time": "20-6-1394 15:41:49.512305"
    }, {
      "id": 1,
      "sender": 2,
      "receiver": {
        "id": 4,
        "username": "ghazan",
        "first_name": "ghazan",
        "last_name": "ghazan"
      },
      "title": "shaftan",
      "body": "saalam",
      "created_time": "20-6-1394 15:41:38.626508"
    }]
  };

  function search(value) {
    return lstMsg.results.filter(function(e) {
      return e.id == value
    });
  }

  console.log(search(2)[0]);
})();

Update: Using AngularJS:

Demo using filter in Javascript in AngularJS.

Final Update: Using $filter in AngularJS.

$filter("filter")($scope.lstMsg.results, {id: msg_id}); // Remove the boolean parameter.

Then:

$scope.filterAngular = function (msg_id) {
    $scope.found = $filter("filter")($scope.lstMsg.results, {id: msg_id})[0];
    console.log($scope.found);
    $scope.message = $scope.found.body;
    $scope.title = $scope.found.title;
};

In this demo I've implemented the filterAngular function. Basically, you need to remove the «true» parameter in your function.

Demo using $filter in Angular's controller

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2017-11-18 05:38:30Z

0

You can use a simple for loop and then filter on the id. not knowing what your trying to do after the filter specifically, I gave two examples of appending data to and innerHTML elements or push-ing to append to an array outside the loop.

function showMessage() {
  var p1 = document.getElementById("result_body");
  var p2 = document.getElementById("result_title");
  for (var i = 0; i < lstMsg.results.length; i++) {
    if (lstMsg.results[i].id === 2) {
      //SIMPLE OUTPUT FOR DEMO
      p1.innerHTML = lstMsg.results[i].body;
      p2.innerHTML = lstMsg.results[i].title;
      //COULD USE AN PUSH TO AN ARRAY
      someArray.push(lstMsg.results[i].body);
      someArray.push(lstMsg.results[i].title);
    }
  }
}

edited Nov 18, 2017 at 5:38

Danny Fardy Jhonston Bermúdez

5,5915 gold badges27 silver badges38 bronze badges

answered Sep 20, 2015 at 19:13

Jordan Davis

1,5358 gold badges24 silver badges42 bronze badges

Comments

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2017-11-18 05:38:33Z

0

Just with javascripttry this:

Array.prototype.filterObjects = function(key, value) {
  return this.filter(function(x) {
    return x[key] === value;
  })
}

var lt = lstMsg['results'];
var res = lt.filterObjects('id', 2);

DEMO

edited Nov 18, 2017 at 5:38

Danny Fardy Jhonston Bermúdez

5,5915 gold badges27 silver badges38 bronze badges

answered Sep 20, 2015 at 19:06

CY5

1,58018 silver badges23 bronze badges

Collectives™ on Stack Overflow

Find an item in object by filter

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related