includes()와 함께 filter()를 사용하여 부분 일치를 얻습니다.

Question

검색 할 객체가있는 배열이 있습니다. 검색 가능한 배열은 다음과 같다 :

[ 
    { value: 0, label: 'john' }, 
    { value: 1, label: 'johnny' }, 
    { value: 2, label: 'peter' }, 
    { value: 3, label: 'peterson' } 
] 

는 I는 Lodash 필터 방법을 사용하여 본을 검색 :

가

search = (text) => { 
    let results = _.filter(
     this.props.options, 
     { label: text } 
    ); 
} 

이것은 오직 정확하게 검색 쿼리 (text 파라미터)과 일치하는 결과이다. 부분 일치로이 작업을해야합니다. 따라서 j 또는 johnny을 삽입하면 'John'과 'Johnny'를 모두 찾을 수 있습니다. , 운이

search = (text) => { 
    let results = _.filter(
     this.props.options => 
      this.props.options.includes({ label: text }) 
    ); 
} 

을하지만 :

이 나는 ​​시도하지했다. 오류가없고 결과가 없습니다. 이 작품을 어떻게 만들 수 있습니까?

Answer 1

그건 어떻게 String.prototype.includes을 사용하지 않습니다. 객체가 아닌 문자열을 제공해야합니다.

search = (text) => { 
    let results = _.filter(
     this.props.options,        // first parameter to _.filter is the array 
     option => option.label.includes(text)   // the second parameter is a funtion that takes an option object and returns a boolean (wether the label of this option includes the text text or not) 
    ); 
} 

Answer 2

String#includes은 문자열을 바늘로 받아들입니다. 바늘이 문자열이 아니면 문자열로 변환되고 객체의 경우는 [object Object]입니다.

const options = [ 
 
    { value: 0, label: 'john' }, 
 
    { value: 1, label: 'johnny' }, 
 
    { value: 2, label: 'peter' }, 
 
    { value: 3, label: 'peterson' } 
 
]; 
 

 
const search = (text) => options.filter(({ label }) => label.includes(text)); 
 

 
const result = search('jo'); 
 

 
console.log(result);

Answer 3

당신이 ES6의 standat의 일부입니다 includes를 사용하고 있기 때문에, 그때는이 문제를 해결합니다 :

당신은 label의 값을 취득하고, 문자열의를 사용해야합니다

이 방법은, 작업을 lodash-filter 대신 Array.prototype.filter으로 변경하십시오.

let search = (list, text) => 
    list.filter(i => i.label.toLowerCase().includes(text.toLowerCase())); 

let list = [ 
    { value: 0, label: 'john' }, 
    { value: 1, label: 'johnny' }, 
    { value: 2, label: 'peter' }, 
    { value: 3, label: 'peterson' } 
]; 

let result = search(list, 'j'); 

console.log(result); // [{value: 0, label: "john"}, {value: 1, label: "johnny"}] 

또한 .toLowerCase으로 "john"대신 "John"을 사용할 수 있습니다.