input Search = includes keep returning Null

i’m trying to create a input search to search for certain values in a array of objects fetched from a certain API… but each time i use the java script code it returns null

const search_input = document.querySelector('.input_search')
function searchCharacter() {
    fetch(api)
    .then(function(e){
        return e.json()
    })
    .then(function(data) {
        let characters = [];
        characters.push(...data) 
        search_input.addEventListener('keyup' , (e) => {
        const input_string = e.target.value
        const filterSearch =  characters.filter( e => {
               return  e.name.includes(input_string)

        })
        console.log(filterSearch)
    })    
})}
searchCharacter();

if i switched e.name with e.short_name or e.shortnames[0] i works just fine , but i need for the function too look up the name since they are more readable this img of the structure of the array
enter image description here

7 thoughts on “input Search = includes keep returning Null”

  1. I am assuming from your question that your input_string is "hash" in your example?

    This will currently not work with e.name because it’s all uppercase and your search term is lower case.

    const e = {
        name: "HASH",
    };
    const input_string = "hash";
    
    console.log(e.name.toLowerCase().includes(input_string)); // returns true
    

    Depending on how your input_string is defined, you should probably turn that to lowercase as well.

    Reply

Leave a Comment