'Query and get data from an endpoint through the a search bar input in javascript

This endpoint http://vk-data:8003/v1/entity/ returns this:

[
    {
        "id": "country",
        "url": "http://vk-data:8003/v1/entity/country",
        "name": "Countries",
        "description": "All the countries in the world"
    },
    {
        "id": "data-site",
        "url": "http://vl-data:8003/v1/entity/data-site",
        "name": "World data storage",
        "description": "A catalog of health data"
    }
]

I want to write a function that allows user to access either data-site or country data through a search bar input.

How can I get my code to do that? Here's what I have so far.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/styles.css">

</head>
<body>
<button id="catalog" onclick="RetrieveCatalog()">Get Catalog</button>

<input type="text" placeholder="Search for User" onChange={(e) => RetrieveEntities(e.target.value)} className="input_search" />
<button onClick={fetchData} className="search_button">Search Github</button>
<script>

//fetch catalog function
function RetrieveCatalog(){
    //http request
    fetch("http://vk-data:8003/v1/entity/")
    .then(function(data){
        console.log(data)
        return data.json()
    })
    .then(function(data){})
    .catch(error => console.error(error))
    }
    
    //fetch catalog function
function RetrieveEntities(){
    //http request
    fetch("http://vk-data:8003/v1/entity/${entities}")
    .then(function(data){
        console.log(data)
        return data.json()
    })
    .then(function(data){})
    .catch(error => console.error(error))
    }

</script>

</body>

</html>
javascripthtmlfetchfetch-api


Solution 1:[1]

I believe the issue is that you have got confused between JSX and HTML syntax.

There are a few areas where you have gotten mixed up between the two. Here are the places to fix.

  1. In the <input> tag, change the onChange attribute to onchange. Also, surround the function with quotes ("") instead of curly braces ({}).

    <input onchange="(e) => RetrieveEntities(e.target.value)" />

  2. In the same <input> tag, change the className attribute to class.

    <input class="input_search" />

  3. In the <button> element, change the onClick attribute to onclick, as well as surrounding the value with quotes.

    <button onclick="fetch"></button>

  4. In the <button> tag, change className to class.

    <button class="search_button"></button>

These changes in your HTML code should help solve the issue.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Arnav Thorat

Related Questions