Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arojunior/javascript-search-input
Search for terms in objects and nested objects
https://github.com/arojunior/javascript-search-input
Last synced: about 2 months ago
JSON representation
Search for terms in objects and nested objects
- Host: GitHub
- URL: https://github.com/arojunior/javascript-search-input
- Owner: arojunior
- License: mit
- Created: 2020-06-19T13:09:37.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T09:20:45.000Z (almost 2 years ago)
- Last Synced: 2024-10-18T04:07:43.773Z (2 months ago)
- Language: JavaScript
- Size: 842 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: readme.md
- License: license.md
Awesome Lists containing this project
README
# javascript-search-input
Search for terms in objects and nested objects
**Install**
```sh
yarn add javascript-search-input
```
**Usage**
```javascript
import { createFilter } from 'javascript-search-input';
const sampleData = [{
id: 1,
user: {
name: 'Junior Oliveira',
job: 'Software Engineer',
},
subject: 'Hi!',
dest: [
{
name: 'Bruno',
job: 'Developer',
},
{
name: 'Helio',
job: 'Lawyer',
}
]
}, {
id: 2,
user: {
name: 'Fabiano',
job: 'UX Designer',
},
subject: 'javascript',
dest: [
{
name: 'Cordeiro',
job: 'CEO',
},
]
}];
const KEYS_TO_FILTERS = ['user.name', 'subject', 'dest.name'];
const myFilter = createFilter(KEYS_TO_FILTERS)
const filtered = sampleData.filter(myFilter('Oliveira'));
// should return the object { ... user: { name: 'Junior Oliveira'} ... }
```
The library is framework agnostic, but if you wanna use with **React**, for example:
```javascript
const useFilter = ({ keys, data }) => {
const [inputText, setInputText] = useState('');
const myFilter = createFilter(keys);
const filtered = data.filter(myFilter(inputText));
return { inputText, setInputText, filtered };
};
const App = () => {
const { inputText, setInputText, filtered } = useFilter({
keys: ['user.name', 'subject', 'dest.name'],
data: sampleData,
});
return (
setInputText(event.target.value)}
/>
{JSON.stringify(filtered)}
);
};
```