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”：“假人，” 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。有想法吗？

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

第一个元素实际上没有“键”。您将必须为此首先添加其他支票。

JSON结构中的搜索功能

1 个答案: