почему мой код не фильтрует массив? Что мне не хватает?

Question

Вот код
HTML:

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

Javascript: Объявление списка и переменных:

 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,
},
]

функция для события поля ввода 'onchange':

function onSearchChange(value){   
searchItem = value;
}

функция карты для извлечения свойств объекта:

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

основная функция:

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

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.

Answer 2

Вы захотите запускать myFunc каждый раз, когда вызывается onSearchChange, а не только один раз

Кроме того, в .filter(fn), fn - это функция, которая возвращает truey / falsey - тогда как в вашем кодеон возвращает функцию, которая является правдивой, и внутренняя функция никогда не запускается

Кроме того, var searchItem полностью не связан с именем аргумента searchItem в функции обратного вызова вашего фильтра

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;
}

примечание 1: вы можете, конечно, onChange="myFunc(this.value)" вместо вызова функции, которая вызывает функцию с точно такими же аргументами

примечание 2: нет необходимости в var searchItem или 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,
}];

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>