Estoy intentando filtrar un archivo json para que coincida con el valor de entrada. Escribo el código a continuación. El archivo json es multidimensional.
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>Necesito hacer coincidir la entrada con la clave 4 y necesito eliminar los valores duplicados. ¿Cómo hacerlo? probé con
state.key3.filter(...state.key4 pero da errores
Puede obtener el resultado filtrado de key4 , por lo que puede usar algunos y comienza con
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>Esto mostrará el objeto que tiene un valor key4 exactamente igual a la entrada de búsqueda:
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>Y para los valores coincidentes que comienzan con el valor de entrada de búsqueda, puede hacer esto:
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>