what to use instead of filter on type strings

I am making search input in javascript I am getting data from a JSON file. My data.filter(...) is working fine when I have a simple string in my JSON file. But when I have a type string It gives me an error .

js file:

const allListItems = document.getElementById("all-list-items");

fetch('json-data.json')
    .then(response => response.json())
    .then(function (data) {
        render(data)
        document.getElementById("searchInput").addEventListener("input", event => {
            const value = /** @type {string} **/ (event.target.value);

            const terms = value.toLowerCase().split(/[ -]/);
            render(data.filter(name => terms
                .map(term => name.toLowerCase().includes(term))
                .reduce((result, entry) => result && entry)));
        });
    })
    .catch(err => console.log('error: ' + err))


function render(things) {
    let html = '';
    for (const thing of things) {
        html += `<li class="names">${thing}</li>`;
    }

    allListItems.innerHTML = html || 'No match';
}

works fine with this JSON file

["I am Akram", "I am Samreen", "I-am-Akram", "I-am-Samreen", "I-am Akram", "I-am Samreen", "Hello I am-Akram", " Hello I am-Samreen"];

But it is not working with This JSON file:

when I use this JSON file I change html += `<li class="names">${thing}</li>`; to html += `<li class="names">${thing.name}</li>`;

[
 {
   "id": 1,
   "name":"I am Akram"
 },
 {
   "id": 2,
   "name": "I am Samreen"
 },
 {
   "id": 3,
   "name":"I-am-Akram"
 },
 {
   "id": 4,
   "name": "I-am-Samreen"
 },
 {
   "id": 5,
   "name":"I-am Akram"
 },
 {
   "id": 6,
   "name":"I-am Samreen"
 },
 {
   "id": 7,
   "name": "Hello I am-Akram"
 },
 {
   "id": 8,
   "name":" Hello I am-Samreen"
 }]

HTML file:

<div>
    <label for="searchInput">Search: </label><input id="searchInput">
    <ul id="all-list-items">
</div>

Answer

Your filter is doing a filter on an array of objects. The way you have it now, name is actually the object, not the name. To fix this you need to access the name property on the object.

For example .map(term => name.name.toLowerCase().includes(term))

So to make it more clear I would suggest renaming the variable name to something like

render(data.filter(person => terms
    .map(term => person.name.toLowerCase().includes(term))
    .reduce((result, entry) => result && entry)));

or whatever makes sense for what that object really defines.