Este punto final http://vk-data:8003/v1/entity/ devuelve esto:
[ { "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" } ] Quiero escribir una función que permita al usuario acceder a los data-site o del country a través de una entrada en la barra de búsqueda.
¿Cómo puedo obtener mi código para hacer eso? Esto es lo que tengo hasta ahora.
<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>Creo que el problema es que te has confundido entre la sintaxis JSX y HTML.
Hay algunas áreas en las que te has confundido entre los dos. Aquí están los lugares para arreglar.
En la etiqueta <input> , cambie el atributo onChange a onchange . Además, rodee la función con comillas ( "" ) en lugar de llaves ( {} ).
<input onchange="(e) => RetrieveEntities(e.target.value)" /> En la misma etiqueta <input> , cambie el atributo className a class .
<input class="input_search" /> En el elemento <button> , cambie el atributo onClick a onclick , además de rodear el valor con comillas.
<button onclick="fetch"></button> En la etiqueta <button> , cambie className a class .
<button class="search_button"></button>Estos cambios en su código HTML deberían ayudar a resolver el problema.