I am triying filter a json file to match the input value. I write the code below. The json file is multi dimensional.
JavaScript
x
38
38
1
var object = [{"key1" : "Test value 1",
2
"key3" : [{
3
"key4" : "Test value 3",
4
"key5" : "Test value 4"
5
},
6
{
7
"key4" : "Test value 5",
8
"key5" : "Test value 6"
9
}]
10
},
11
{
12
"key1" : "Test value 11",
13
"key3" : [{
14
"key4" : "Test value 13",
15
"key5" : "Test value 14"
16
},
17
{
18
"key4" : "Test value 15",
19
"key5" : "Test value 16"
20
}]
21
}];
22
23
const search = document.getElementById("search");
24
const matchList = document.getElementById("match-list");
25
26
searchStates = searchText => {
27
28
const states = object;
29
30
let matches = states.filter(state => {
31
const regex = new RegExp(`^${searchText}`, 'gi');
32
33
return state.key3.key4.match(regex);
34
});
35
console.log(matches);
36
};
37
38
search.addEventListener("input", () => searchStates(search.value));
JavaScript
1
2
1
<input type="text" id="search" class="form-control form-control-lg" placeholder="type here">
2
<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
Advertisement
Answer
This will show the object that has a key4
value exactly equal to the search input:
JavaScript
1
22
22
1
var object = [
2
{ key1: 'Test value 1', key3: [
3
{ key4: 'Test value 3', key5: 'Test value 4' },
4
{ key4: 'Test value 5', key5: 'Test value 6' }
5
]},
6
7
{ key1: 'Test value 11', key3: [
8
{ key4: 'Test value 13', key5: 'Test value 14' },
9
{ key4: 'Test value 15', key5: 'Test value 16' }
10
]},
11
]
12
13
const search = document.getElementById('search')
14
const matchList = document.getElementById('match-list')
15
searchStates = searchText => {
16
const found = object.filter(obj => {
17
return obj.key3.some(i => i.key4 == searchText)
18
})
19
matchList.textContent = JSON.stringify(found, null, 2)
20
}
21
22
search.addEventListener('input', () => searchStates(search.value))
JavaScript
1
2
1
<input type="text" id="search" class="form-control form-control-lg" placeholder="type here" />
2
<pre id="match-list"></pre>
And for matching values that starts with the search input value you can do this:
JavaScript
1
35
35
1
var object = [
2
{
3
key1: 'Test value 1',
4
key3: [
5
{ key4: 'Test value 3', key5: 'Test value 4' },
6
{ key4: 'Test value 5', key5: 'Test value 6' },
7
],
8
},
9
10
{
11
key1: 'Test value 11',
12
key3: [
13
{ key4: 'Test value 13', key5: 'Test value 14' },
14
{ key4: 'Test value 15', key5: 'Test value 16' },
15
],
16
},
17
]
18
19
const search = document.getElementById('search')
20
const matchList = document.getElementById('match-list')
21
22
searchStates = searchText => {
23
if (!searchText) return (matchList.textContent = '')
24
25
searchText = searchText.toLowerCase()
26
const inputLength = searchText.length
27
const found = object.filter(obj => {
28
return obj.key3.some(
29
i => i.key4.slice(0, inputLength).toLowerCase() == searchText
30
)
31
})
32
matchList.textContent = JSON.stringify(found, null, 2)
33
}
34
35
search.addEventListener('input', () => searchStates(search.value))
JavaScript
1
2
1
<input type="text" id="search" class="form-control form-control-lg" placeholder="type here" />
2
<pre id="match-list"></pre>