0

I am working on a filterable gallery, but now It is only showing the right image when the whole title matches the input value. But I want to filter on seperated letters. Here I wrote a function: ` 

filterList (filterText) {
    var updatedList = this.props.array; 
    return updatedList.filter(function(item){
        var split = item.name.split("");
        console.log(split, filterText);
        return split === filterText;
    });
  }

Now it show me the seperated item.name like this: ["p","h","o","t","o","","1"] Instead of Photo 1 I want to filter on seperated letters.

Here is a link to the codePen: LINK `

Amruth L S
  • 4,439
  • 1
  • 21
  • 38
Sireini
  • 3,542
  • 9
  • 42
  • 78
  • That doesn't make much sense. Whether you filter on the whole string, or individual letters, the match is exactly the same; all letters in the array must match. If you want to do partial matches, you'll need to do some more work, probably with `substring` or `slice` to get the minimum number of letters to match. – Heretic Monkey Oct 06 '16 at 16:57

2 Answers2

1

One way is to compare the input value with a substring of the whole title that has the same length. Here is an example:

filterList (filterText) {
    var len = filterText.length,
        updatedList = this.props.array;

    return updatedList.filter(function(item){
        var split = item.name.slice(0, len);
        console.log(split, filterText);
        return split === filterText;
    });
}
Alex.S
  • 345
  • 1
  • 8
  • I don't get it we give as end variable to the slice function the length of the input value. But how does it work? – Sireini Oct 06 '16 at 17:26
  • 1
    `String.slice(0, x)` is to get the first x characters and return it as a new string. `.slice()` is similar to `.substring()`, but also has a few differences. Check out [more details here](http://stackoverflow.com/questions/2243824/what-is-the-difference-between-string-slice-and-string-substring) – Alex.S Oct 06 '16 at 17:50
0

My first guess is this:

filterList (filterText) {
    var updatedList = this.props.array; 
    return updatedList.filter(function(item){
        var split = item.name.split(" ");
        console.log(split, filterText);
        return split === filterText;
    });
  }

maybe if you give us an example 'filterText' and return how its suposed to be it would be easier.

Aschab
  • 1,268
  • 1
  • 11
  • 28
  • @Beginnerprogrammer Please include all relevant code as a [mcve] in the question itself, not on a third party site. See [ask]. – Heretic Monkey Oct 06 '16 at 16:58