How can we utilize user input to query the API effectively?

Question

How can we utilize user input to query the API effectively?

Currently, I am utilizing the API to retrieve anime information.

To fetch a specific anime, the endpoint is: https://nyaaapi.herokuapp.com/nyaa/anime?query={nameofanime}

I am seeking to input the name of the anime from the user.

Being new to APIs and JSON, my previous attempts using random endpoints were not successful. I attempted some JavaScript code but it was quite off.

const userInput = document.querySelector("#userInput").value;

fetch("https://nyaaapi.herokuapp.com/nyaa/anime?query=${userInput}")
  .then((response) => response.json())
  .then((quote) => console.log(quote));

<html>
<head>
<title>
anime
</title>
</head>
<body>

  <p>
    Anime: <input id="userInput" value="{naruto}" />
    <br />
    <button id="submit">submit</button>
  </p>
  <script src="index.js"></script>
</body>
</html>

What's currently functioning: The request is successfully being sent to the API and logged!

What's not working at the moment: While the request is being sent and logged, the relevant information is not showing (see image below).

https://i.sstatic.net/8IxkW.png

Edit: The third answer provided has been most helpful for my requirements. Now, I will work on displaying the logged info to the user.

javascript json string api

Answer 1

Answer №1

If you want to see what happens when the input is submitted, try implementing this code snippet:

Make sure to include an input field in your HTML:

<input id="input" type="text" />

Then add this JavaScript function:

function getData(e) {
  const animeName = e.target.value;
  const apiUrl = `https://nyaaapi.herokuapp.com/nyaa/anime?query=${animeName}`;
  fetch(apiUrl)
    .then((response) => response.json())
    .then(console.log);
}

const userInput = document.getElementById("input");

userInput.addEventListener("change", getData);

Answer 2

If you want to see what happens when the input is submitted, try implementing this code snippet:

Make sure to include an input field in your HTML:

<input id="input" type="text" />

Then add this JavaScript function:

function getData(e) {
  const animeName = e.target.value;
  const apiUrl = `https://nyaaapi.herokuapp.com/nyaa/anime?query=${animeName}`;
  fetch(apiUrl)
    .then((response) => response.json())
    .then(console.log);
}

const userInput = document.getElementById("input");

userInput.addEventListener("change", getData);

Answer 3

Answer №2

If you want to retrieve the value of a DOM element, you can use the document.querySelector(); method.

const inputText = document.querySelector("#inputText").value;

After getting the user input, utilize the fetch() function to send an API request.

fetch(`https://exampleapi.com/data?search=${inputText}`).then((response) => {
       console.log(response);
})

Answer 4

If you want to retrieve the value of a DOM element, you can use the document.querySelector(); method.

const inputText = document.querySelector("#inputText").value;

After getting the user input, utilize the fetch() function to send an API request.

fetch(`https://exampleapi.com/data?search=${inputText}`).then((response) => {
       console.log(response);
})

Answer 5

Answer №3

I have previous experience working on a similar project which could serve as a helpful starting point for you.

window.onload=function(){

        const input = document.getElementById("input");
        const getName = document.getElementById("getName");

        getName.addEventListener("submit", e => {
            e.preventDefault();
            var inputVal = getName.value;
            var api_url = "{apiurl}" + inputVal;

            function refreshData() {
                fetch(api_url).then(response => {
                    response.json().then(json => {
                        let dataset = json;
                        let output = formatResponse(dataset);

                    })
                    .catch(error => console.log("not ok")); 
                })

            
        };
});
};

<form id="getName" class="search">
            <input type="text" id="input">
            <button id="submit" type="submit">Search</button>
</form>

Answer 6

I have previous experience working on a similar project which could serve as a helpful starting point for you.

window.onload=function(){

        const input = document.getElementById("input");
        const getName = document.getElementById("getName");

        getName.addEventListener("submit", e => {
            e.preventDefault();
            var inputVal = getName.value;
            var api_url = "{apiurl}" + inputVal;

            function refreshData() {
                fetch(api_url).then(response => {
                    response.json().then(json => {
                        let dataset = json;
                        let output = formatResponse(dataset);

                    })
                    .catch(error => console.log("not ok")); 
                })

            
        };
});
};

<form id="getName" class="search">
            <input type="text" id="input">
            <button id="submit" type="submit">Search</button>
</form>

How can we utilize user input to query the API effectively?

Answer №1

Answer №2

Answer №3

Similar questions

Which is better: using Regular Expressions with preg or substr?

What is the best way to eliminate a character from a string using a loop?

Having trouble displaying API JSON data in a Vue.js table component

Retrieve a single value from a JavaScript array

When validating with Sequelize, an error occurred due to one or more columns being undefined:

Steps for transforming a JSON into a Class to generate objects

JavaScript: create a new array by selecting elements from an existing array (similar to C#'s Select

Retrieve the value of a variable from a JSON decoded response

Struggling to apply the onclick function to an HTML element

Resizable dynamic table in HTML

Having trouble with Resizing Images in jQuery despite successful image rotation

Merging arrays with the power of ES6 spread operator in Typescript

How to read post data in JSON format using body-parser in a Node.js Express

"Exploring the Seamless JSON Deserialization Feature of Jersey MOXy with Case-Insensitive Handling

Issues encountered while optimizing JSON file in a ReactJS program

Showing information in a textarea using ejs

Mastering basic operations with Vue in Laravel

What is the best way to set up <Input> to restrict input to only include letters, spaces, and the backspace key

json data hidden from sight in jQuery

Issues arise when attempting to generate multiple instances of textboxes and textbox groups dynamically within AngularJS