why my code is not filtering the array?what am i missing?

Question

Here is the code
HTML:

<form>
<input type = "text" id="searchTerm" onChange="onSearchChange(this.value)" />
 </form>
<div id = "root"></div>

Javascript: List and variables declaration:

 var searchItem="";
        var isFiltered;
        const list = [
  {
    title: 'React',
url: 'https://facebook.github.io/react/',
author: 'Jordan Walke',
num_comments: 3,
points: 4,
objectID: 0,
},
{
title: 'Redux',
url: 'https://github.com/reactjs/redux',
author: 'Dan Abramov, Andrew Clark',
num_comments: 2,
points: 5,
objectID: 1,
},
]

function for input field event 'onchange':

function onSearchChange(value){   
searchItem = value;
}

map function for extrating object properties:

function extractProps(items){
    var x = "<div> <span>" +items.title+", </span> <span>"+items.author +"<span></div>"
    return x;
}

main function:

function myFunc(){
    document.getElementById('root').innerHTML = "";
    var y= list.filter( isFiltered = searchItem => (item) => item.title.toLowerCase().includes(searchItem.toLowerCase())).map(extractProps).join("");
    document.getElementById('root').innerHTML = y;
     alert(y);
}
myFunc()

Answer 1

You'll want to run myFunc every time onSearchChange is called, not just once

Also, in .filter(fn) , fn is a function that returns truthy/falsey - whereas in your code it returns a function, which is truthy, and the inner function never runs

Also, the var searchItem is totally unrelated to the argument name searchItem in your filter callback function

function onSearchChange(value){   
    myFunc(value);
}

function myFunc(searchItem = ""){
    document.getElementById('root').innerHTML = "";
    var y= list.filter( item => item.title.toLowerCase().includes(searchItem.toLowerCase())).map(extractProps).join("");
    document.getElementById('root').innerHTML = y;
}

note 1: you could of course onChange="myFunc(this.value)" instead of calling a function that calls a function with exactly the same arguments

note 2: no need for var searchItem or isFiltered (what was that for anyway?)

as a bonus, all of it rewritten in a more modern style and proper indentation to make it readable

 const list = [{ title: 'React', url: 'https://facebook.github.io/react/', author: 'Jordan Walke', num_comments: 3, points: 4, objectID: 0, }, { title: 'Redux', url: 'https://github.com/reactjs/redux', author: 'Dan Abramov, Andrew Clark', num_comments: 2, points: 5, objectID: 1, }]; const extractProps = ({title, author}) => `<div><span>${title}, </span> <span>${author}<span></div>`; document.getElementById('searchTerm').addEventListener('change', function() { myFunc(this.value.toLowerCase()); }); const myFunc = (searchItem = '') => document.getElementById('root').innerHTML = list .filter(item => item.title.toLowerCase().includes(searchItem)) .map(extractProps) .join(""); myFunc(); 

 <form> <input type="text" id="searchTerm" /> </form> <div id="root"></div> 

Answer 2

By using $.map() you can achieve this.
Provide array of objects(here list) and call back function.

function myFunc(){
    var fillteredArr = $.map( list, function( val, i ) {
         if(val.title.toLowerCase() == searchItem.toLowerCase())
            return val;
    });
    return fillteredArr;
}

The function myFunc() will return the filltered array of objects.