1

I have such json data:

  [  
     {  
       "id":1,
        "brand":"Apple",
        "model":"Iphone 5",
        "os":"macOs"
     },
     {  
        "id":2,
        "brand":"Apple",
        "model":"Iphone 6",
        "os":"macOs"
     },
     {  
        "id":3,
        "brand":"Samsung",
        "model":"Samsung Galaxy",
        "os":"Android"
     },
     {  
        "id":4,
        "brand":"Meizu",
        "model":"Meizu M2 note",
        "os":"Android"
      }
    ]

And I need to build such input field filter so If I type 'Android Meizu' then it should find 'Meizu' item. Basically it should do pretty much same thing as this plunk: http://plnkr.co/edit/kozaU39E74yqjZCpgDqM?p=preview but i need all this made in one input field.

Thanks for help!

4
  • plnkr.co/edit/kGnNd8lkvTe2lIe8LzoH?p=preview this should do Commented Jul 12, 2017 at 15:54
  • 1
    what you want? Android Meizu will find all having either Android or Meizu or it will find those having both? Commented Jul 12, 2017 at 16:01
  • @KoushikChatterjee it should find all items which have android and Meizu. Commented Jul 12, 2017 at 16:49
  • @ManavalanMavan added a answer. please check. Commented Jul 12, 2017 at 18:19

2 Answers 2

1

here the point is, to implement the logic that how to find/filter out objects that matches with your input, either in different properties or in a single property, once you are able to write the logic, there is no big deal to create a angular filter.

here I am writing a filter assuming your objects are having flat structure. since you want to filter when all the tokens founds in object, like "Android Meizu" will return the objects having "Android" in some field, and "Meizu" in some field, or "Android Meizu" al a whole in some field, we cal split it, and check that, if all tokens are sup part of any of the value of the object, we can take that object, that way both the criteria fullfiled. Here is a code sample that should work

.filter('detailSearch', function() {
    return function(input, filterStr) {
        //this will split to strings by space, if space is not there
        //still it will wrap in array the single element 
        //the filter will remove empty strings if multiple spaces are there 
        var tokens = filterStr.split(" ").filter(function(s) {
            return s
        });
        var op = input.filter(function(obj) {
            //taking valuesassuming your object having flat structure,
            //if all not strings converted to string and lower case
            var values = Object.values(obj).map(function(v) {
                return v.toString().toLowerCase()
            });
            var keysExistsInObj = tokens.filter(function(key) {
                return values.some(function(v) {
                    return v.includes(key.toLowerCase())
                });
            });
            //checking for all tokens exists
            return keysExistsInObj.length === tokens.length;
        });
        return op;
    }
})

Comment if anything is not clear.

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

Comments

0

Here is the angular 2 implementation where IProduct[] is the interface for my json input

import { Pipe, PipeTransform } from '@angular/core';

import { IProduct } from '../products/product';
@Pipe({

  name:'productFilter'
})
export class ProductFilterPipe implements PipeTransform{

  transform(value: IProduct[], filterBy: string): IProduct[] {
      filterBy = filterBy ? filterBy.toLocaleLowerCase() : null;
      return filterBy ? value.filter((product: IProduct) =>
          product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1) : value;
  }


}

You can see this in action on this url https://rahulcvng2.netlify.com/products

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.