API fail to load for XMLHttpRequest using Json file

JavaScript
1

Hello,
I’m trying to create a search engine using XMLHttpRequest to pull data from a JSON file. Then show that data in a new tab. When I test my site I don’t receive any errors.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Search</title>
</head>
<body>
<script src = "script.js"></script>
</body>
</html>

JS

    // xmlRequest
    xhrRequest.addEventListener('DOMContentLoaded', function (event){    
    xhrRequest.open('GET','api.json'+val);
    xhrRequest.send();
    console.log(xhrRequest)
    });
}
// handling enter key event

document.getElementById('hero-name').addEventListener('keydown',function(event){

    if(event.key.code==13){

        if(heroId==0){
            alert('No hero found! Try selecting the hero from the list');
        }else{
        showHero();
        }
    }
});

Thank you

2

PD: there is a problem in the “architecture”

This code will run a full XHR request everytime a person times a key.

What you need is to call to the database when page is loading, and store all the superheros in localStorage.

When someone types you just search through that object, and could provide the user a ‘search by’ option also, because you don’t need a call to db on every action.

So I would do get data just call to db on page load, in pseudocode:

document.onload= function(e){
//the XHR request
// store in  localStorage.
}

then run events.

3

Thank you for your feedback! For the pseudocode you provided :

document.onload= function(e){
//the XHR request
// store in  localStorage.
}

I couldn’t find a lot of info on document.onload should I reference window.onload instead?

Thanks again!

4

you are welcome @pcoding , i don’t have enough time now but if your code is on github send it to me and i will take a look, test locally, and suggest changes.

as for the onload i mispelled it, but it needs to be an event listener that fires up very soon, so you get the data before the user actually clicks on anything.

5

@ santimir Yes, my link is GitHub - patrice111/SuperSearch: Superhero Search Engine
Thanks again!

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.