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>