来自 JSON 结构的搜索功能

Question

我正在寻找根据用户在搜索字段中输入的内容搜索 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"} ...

它会 return 一个错误，例如：

item.toLowerCase is not a function

我如何实现一个搜索功能，如果用户搜索“tommy”return 我的名字

这就是我检索 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 但不适用于真实的。有什么想法吗？

Answer 1

您必须遍历项目的每个属性并比较每个属性：

首先循环 data.filter
获得每个道具的所有道具Object.keys(item)
检查是否至少有一个符合条件 .some
将项目中的键与值进行比较item[key].toLower....

$: filtered = data.filter(item => 
   Object.keys(item).some(key => 
     item[key].toLowerCase().includes(value.toLowerCase())
   )
);

请注意，此代码假定数组中的所有项都是对象，如果您混合使用对象和字符串，它将失败：

[ "Tommy", { name: "Sammy" }]

这里第一个元素实际上没有'keys'。您必须先为此添加额外的检查。

来自 JSON 结构的搜索功能

Search function from JSON structure

arrays

search

json

function

svelte