I am triying filter a json file to match the input value. I write the code below. The json file is multi dimensional.
var object = [{"key1" : "Test value 1",
"key3" : [{
"key4" : "Test value 3",
"key5" : "Test value 4"
},
{
"key4" : "Test value 5",
"key5" : "Test value 6"
}]
},
{
"key1" : "Test value 11",
"key3" : [{
"key4" : "Test value 13",
"key5" : "Test value 14"
},
{
"key4" : "Test value 15",
"key5" : "Test value 16"
}]
}];
const search = document.getElementById("search");
const matchList = document.getElementById("match-list");
searchStates = searchText => {
const states = object;
let matches = states.filter(state => {
const regex = new RegExp(`^${searchText}`, 'gi');
return state.key3.key4.match(regex);
});
console.log(matches);
};
search.addEventListener("input", () => searchStates(search.value));<input type="text" id="search" class="form-control form-control-lg" placeholder="type here">
<div id="match-list"></div>I need to match input with key 4 and need to remove duplicate values. How to do it? I tried with
states.key3.filter(...state.key4 but it give errors
You can get the filtered result from the key4, so you can use some and startsWith
let matches = states.filter( state => state.key3.some( o => o.key4.toLowerCase().startsWith( searchText.toLowerCase() ) ) );
var object = [
{
"key1": "Test value 1",
"key3": [{
"key4": "Test value 3",
"key5": "Test value 4"
},
{
"key4": "Test value 5",
"key5": "Test value 6"
}]
},
{
"key1": "Test value 11",
"key3": [{
"key4": "Test value 13",
"key5": "Test value 14"
},
{
"key4": "Test value 15",
"key5": "Test value 16"
}]
}];
const search = document.getElementById( "search" );
const matchList = document.getElementById( "match-list" );
searchStates = searchText => {
const states = object;
let matches = states.filter( state => state.key3.some( o => o.key4.toLowerCase().startsWith( searchText.toLowerCase() ) ) );
console.log( matches );
};
search.addEventListener( "input", ( e ) => {
searchStates( e.target.value )
} );<input type="text" id="search" class="form-control form-control-lg" placeholder="type here">
<div id="match-list"></div>This will show the object that has a key4 value exactly equal to the search input:
var object = [
{ key1: 'Test value 1', key3: [
{ key4: 'Test value 3', key5: 'Test value 4' },
{ key4: 'Test value 5', key5: 'Test value 6' }
]},
{ key1: 'Test value 11', key3: [
{ key4: 'Test value 13', key5: 'Test value 14' },
{ key4: 'Test value 15', key5: 'Test value 16' }
]},
]
const search = document.getElementById('search')
const matchList = document.getElementById('match-list')
searchStates = searchText => {
const found = object.filter(obj => {
return obj.key3.some(i => i.key4 == searchText)
})
matchList.textContent = JSON.stringify(found, null, 2)
}
search.addEventListener('input', () => searchStates(search.value))<input type="text" id="search" class="form-control form-control-lg" placeholder="type here" />
<pre id="match-list"></pre>And for matching values that starts with the search input value you can do this:
var object = [
{
key1: 'Test value 1',
key3: [
{ key4: 'Test value 3', key5: 'Test value 4' },
{ key4: 'Test value 5', key5: 'Test value 6' },
],
},
{
key1: 'Test value 11',
key3: [
{ key4: 'Test value 13', key5: 'Test value 14' },
{ key4: 'Test value 15', key5: 'Test value 16' },
],
},
]
const search = document.getElementById('search')
const matchList = document.getElementById('match-list')
searchStates = searchText => {
if (!searchText) return (matchList.textContent = '')
searchText = searchText.toLowerCase()
const inputLength = searchText.length
const found = object.filter(obj => {
return obj.key3.some(
i => i.key4.slice(0, inputLength).toLowerCase() == searchText
)
})
matchList.textContent = JSON.stringify(found, null, 2)
}
search.addEventListener('input', () => searchStates(search.value))<input type="text" id="search" class="form-control form-control-lg" placeholder="type here" />
<pre id="match-list"></pre>