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:

6 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

hi! what is that database? i’ve been searching for a very long time to find a json waifu thing i make a discord bot for my friends to have fun but i cant find any database

im just using a local, hand written json file.

Hi @aprobeni!
Welcome to the Glitch community! :glitch:
I recommend MongoDB with the Mongoose npm package. There are loads of tutorials and you can get a free one at mongodb.com/atlas
Hope this helps! :slightly_smiling_face:
Eddie

5 Likes

I think they are looking for an anime info api.

4 Likes

Ah. That would make sense as well. Oh well! MongoDB is still good to recommend :joy:

4 Likes

You can probably find a csv file or json file somewhere on github.
Some I can find with a quick google search are:

There are also some API’s that you can use:

https://anilist.gitbook.io/anilist-apiv2-docs/

There are also a lot more that you can find with a google search.

Try JS-Search, which I created for client-side search. Just adapt it for your own needs.

Hey there- Please dont bump posts. This was solved. Also, advertisements for projects are slightly off-topic…

It is not an advertisement. It is a suggestion for a useful project. In fact, even if it was made by a random stranger, I still would have suggested it.