通过 javascript 中的搜索栏输入从端点查询和获取数据

Question

这个端点http://vk-data:8003/v1/entity/returns这个：

[
    {
        "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"
    }
]

我想编写一个允许用户通过搜索栏输入访问 data-site 或 country 数据的函数。

我怎样才能让我的代码做到这一点？这是我目前所拥有的。

<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>

Answer 1

我认为问题是您混淆了 JSX 和 HTML 语法。

您在某些方面混淆了两者。以下是需要修复的地方。

在 <input> 标签中，将 onChange 属性更改为 onchange。此外，用引号 ("") 而不是花括号 ({}).
将函数括起来
```
<input onchange="(e) => RetrieveEntities(e.target.value)" />
```
在同一个 <input> 标签中，将 className 属性更改为 class。
```
<input class="input_search" />
```
在 <button> 元素中，将 onClick 属性更改为 onclick，并用引号将值括起来。
```
<button onclick="fetch"></button>
```
在<button>标签中，将className改为class。
```
<button class="search_button"></button>
```

您 HTML 代码中的这些更改应该有助于解决问题。

通过 javascript 中的搜索栏输入从端点查询和获取数据

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

html

javascript

fetch

fetch-api