How search data in JS-object?

Question

I've filled up cards on my website via a json file, which is also working.

Picture of cards

Picture of parsed json file

Now I would like to search through these cards via a searchbar, but this doesn't work. I still get to see all the cards.

What am I doing wrong?

Html code

<input id="searchbar" type="text" name="search" placeholder="Search...">
<div class="row" id="divResult"></div>

Script

<script>
    const divRes = document.querySelector('#divResult');

    myRequest = () => {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', 'files/elements.json', true);
        xhr.send();
        xhr.onload = function() {
            if (xhr.readyState === xhr.DONE) {
                if (xhr.status != 200) {
                    divRes.innerHTML = `Error ${xhr.status}: ${xhr.statusText}`;
                } else {
                    const arrResponse = JSON.parse(xhr.responseText);
                    divRes.innerHTML = createHTMLCard(arrResponse);
                }
            }
        };

        xhr.onerror = function() {
            divRes.innerHTML = "Request failed";
        };
    }

    createHTMLCard = (arrObj) => {
        let res = '';

        let input = document.getElementById('searchbar').value
        input = input.toLowerCase();
        console.log(input);

        for (let i = 0; i < arrObj.length; i++) {
            let obj = arrObj[i];

            if (obj.name.toLowerCase() === input) {
                res +=
                    `<div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="card m-2">
                            <div class="card-body">
                                <h5 class="card-title">${obj.name}</h5>
                                <p><strong>Prijs:</strong> ${obj.price}</p>
                                <button id="moreInfo" class="btn btn-primary">More info</button>
                            </div>
                        </div>
                    </div>`;       
            }
        }

        return res;
    }

    document.querySelector('#searchbar').addEventListener('keyup', createHTMLCard);
    window.addEventListener('load', myRequest);
</script>

Answer 1

The code is updated so I am changing my previous answer. Use the below code to fix the issue.

<script>
    const divRes = document.querySelector('#divResult');
    let arrResponse = [];
    myRequest = () => {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', 'files/elements.json', true);
        xhr.send();
        xhr.onload = function() {
            if (xhr.readyState === xhr.DONE) {
                if (xhr.status != 200) {
                    divRes.innerHTML = `Error ${xhr.status}: ${xhr.statusText}`;
                } else {
                    arrResponse = JSON.parse(xhr.responseText);
                    createHTMLCard(arrResponse);
                }
            }
        };

        xhr.onerror = function() {
            divRes.innerHTML = "Request failed";
        };
    }

    createHTMLCard = () => {
        let res = '';
        let input = this.value
        input = input.toLowerCase();
        console.log(input);

        for (let i = 0; i < arrResponse.length; i++) {
            let obj = arrResponse[i];

            if (obj.name.toLowerCase() === input) {
                res +=
                    `<div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="card m-2">
                            <div class="card-body">
                                <h5 class="card-title">${obj.name}</h5>
                                <p><strong>Prijs:</strong> ${obj.price}</p>
                                <button id="moreInfo" class="btn btn-primary">More info</button>
                            </div>
                        </div>
                    </div>`;       
            }
        }

        divRes.innerHTML = res;
    }

    document.querySelector('#searchbar').addEventListener('keyup', createHTMLCard);
    window.addEventListener('load', myRequest);
</script>

Regards, omi