【发布时间】:2021-02-09 09:45:05
【问题描述】:
我正在寻找基于搜索字段中的用户输入来搜索 JSON 值的解决方案。
例如:如果用户在 ASD 中键入,则 Json 值中包含 ASD 的任何数据都应显示。
我找到了一个例子,它就像我想要的那样工作。但是,它们没有使用 JSON 结构。
这是我遵循的代码: App.svelte:
<script>
import Search from "./Search.svelte";
const data = [
"Metrics Server",
"Node.js",
"Virtual Machine",
"Virtual Private Server",
];
</script>
<Search autofocus {data} let:filtered>
<ul>
{#each filtered as item}
<li>{item}</li>
{/each}
</ul>
</Search>
Search.svelte
<script>
import {onMount} from "svelte";
export let autofocus = false;
export let data = [];
let input = undefined;
let value ="";
onMount(() =>{
if(autofocus) {
input.focus();
}
});
$: filtered = data.filter((item) =>
item.toLowerCase().includes(value.toLowerCase()));
</script>
<style>
ul{
list-style:none;
}
</style>
<input bind:this="{input}" type="search" bind:value />
<ul>
{#each filtered as item}
<li>{item}</li>
{/each}
</ul>
此代码不适用于 JSON 结构,例如: {"name": "tommy, "class":"a"}, {"name": "dummy, "class":"b"} ...
它会返回如下错误:
item.toLowerCase is not a function
如何实现一个搜索功能,如果用户搜索“tommy”,它将返回我的名字
这就是我检索 Json 数据的方式:
let info ="";
onMount(async () =>{
const resp = await fetch('https:xx.xxx.xxx')
info = await resp.json();
});
我得到的数据是这种格式:[编辑]
[ {
"table_schema": "x",
"table_name": "a",
"column_name": "typname",
"data_type": "name",
"character_maximum_length": null
},
{
"table_schema": "b",
"table_name": "x",
"column_name": "typnamespace",
"data_type": "oid",
"character_maximum_length": null
}]
我已经编辑了我的真实 JSON 文件。该代码确实适用于我的虚拟 JSON,但不适用于真正的 JSON。有什么想法吗?
【问题讨论】:
-
你是否有一个对象数组,例如
data = [{ name: 'tommy', class: 'a' }, { name: 'eric', class: 'b' }]
? -
是的。我实际上是使用 fetch 函数从数据库中获取数据。我将用我的代码编辑我的帖子供您参考
标签: arrays json function search svelte