CODEWITHSUNDEEP
angularjsionic-framework
prasad
prasad

Reputation: 2026

How to filter following JSON with ionic filter bar

Using Ionic Filter Bar for implementing search in ionic app, I need to to search on "parent_type" and "child_type" from following json, 

  {
  "status": {
    "code": 200,
    "message": "all data grabbed successfully",
    "cause": ""
  },
  "ParentData": [
    {
      "id": 67,
      "parent_type": "Parent Type",
      "child": [
        {
          "id": 86,
          "child_type": "Child Type"
        },
        {
          "id": 93,
          "child_type": "Child Type1"
        }
      ]
    },
    {
      "id": 68,
      "parent_type": "Parent Type 1",
      "child": [
        {
          "id": 87,
          "child_type": "Child Type 1"
        },
        {
          "id": 94,
          "child_type": "Child Type 2"
        }
      ]
    }
  ]
}

its working fine for "parent_type" with following code

Here is the filter code

$scope.showFilterBar = function () {
      filterBarInstance = $ionicFilterBar.show({

        //setting parentData in following way after rest service call
        //$scope.parentData = jsondata.ParentData

        items: $scope.parentData,
        update: function (filteredItems, filterText) {
          $scope.parentData = filteredItems;
          if (filterText) {
            console.log(filterText);
          }
        },
         filterProperties: ['parent_type']
      });
    };

But not able to search on "child_type"

So is there any way to set filterProperties so it will work for both "parent_type" and "child_type" or any other way to search this Json?

Thanks.

Upvotes: 1

Views: 635

Answers (1)

Bernardo Morales
Bernardo Morales

Reputation: 142

You should remove the "filterProperties" key and then add "expression" key. Your "filterBarInstance" will be something like this:

$scope.showFilterBar = function () {
  filterBarInstance = $ionicFilterBar.show({
    items: $scope.parentData,
    update: function (filteredItems, filterText) {
      $scope.parentData = filteredItems;
      if (filterText) {
        console.log(filterText);
      }
    },
    expression: function(filterText,value,index,array){
      // This function is called for every ParentData object.         
      // "value" will be the current ParentData object,
      // you'll need to iterate over all the "child" array in order to
      // check if any of the "child_type" keys contains the "filterText"
      // so if "parent_type" contains the "filterText" and any(? or all)
      // of the the "child[x].child_type" values also contains the
      // "filterText" return true
    }
  });
};

Check https://github.com/djett41/ionic-filter-bar for the original documentation.

Sorry for my english :)

Upvotes: 3

Related Questions