Is there a way I can make a live search that searches my JSON file in html?

I’ve been looking through a lot of tutorials of how to do this but all of them I found couldn’t help me.

I want to make a searchbox where people can search a waifu name if they put a keyword.

Im pretty sure you can use Object.values to find the name but I don’t know how to actually structure the html file. Please help.

One of these links that I found could help

2 Likes

Are you trying to serve the json values to an HTML file or something?

2 Likes

Everytime the user updates their input in the feild, you could use Ajax to get data live.

3 Likes

Hiya,

First I’ll share a bit of (untested) code, then lets talk about frontend v backend.

You can search your file with something like this:

const data = { "waifuID" : { ... } }; // Your data

const searchTerm = "min"; // Example search term

// Get matches by searching name and anime
const waifu = data.waifuID.filter(d => d.names.indexOf(searchTerm) !== -1 || d.anime.indexOf(searchTerm) !== -1);

console.log(waifu);

If your JSON file is small and you don’t mind transferring the whole thing to the frontend, you can just put this in a <script> in the HTML, get the searchTerm from an input box, and display the result from waifu somewhere on the page instead of just in the console.

If the JSON is really big or is actually coming from a database, I’d make a backend search in express somewhere and pull it using AJAX (fetch) like RiversideRocks said.

Lastly, your JSON file isn’t quite how I’d structure that data, although it will still do the job, I’d have something like:

{
  "waifus": [
    {
      "id" : 1,
      "name": "Megumin",
      "img_url": "etc",
      "claims" : [1], // Not sure what this is for but should it be an array instead?
      "anime": "KonoSuba"
    },
    ...
   ]
}

So in summary, call the collection “waifus” instead of “waifuID”, make it an array, and move the ID inside each object instead of using them as numbered keys. I’ve had trouble with that approach before :smiley:

Lastly, I know it’s an anime fandom thing… just remember that women are people with independent lives, futures, and desires! :relaxed: :woman_technologist:t2:

5 Likes

I’ve tried that but it doesn’t seem to read my json data :c

Thanks, but I don’t really want to change the database because its getting required by many other programs and I’ll have to restructure the code for it :c

I’ll try fixing the ajax tho.

I’ve actually tried most of these methods but they don’t seem to work. I’m also not that knowledgeable in php :confused:

Share your Glitch if you’ve got one :slight_smile:

Ahhhh, I’ve forgot to tell everyone I’ve found a fix, I’ll post it here in a bit.

1 Like