在 Javascript (React) 中过滤嵌套的 JSON 值答案

【问题标题】：Filtering through nested JSON values in Javascript (React)在 Javascript (React) 中过滤嵌套的 JSON 值
【发布时间】：2022-01-17 12:08:22
【问题描述】：

我有一个通过 api 获取的嵌套 json 文件，它是一种嵌套对象。 json文件示例如下：

{
   "trees":{
      "name":"a",
      "age":"9",
      "height":"10",
      "location":"park"
   },
   "cars":{
      "name":"b",
      "age":"30",
      "height":"10",
      "location":"park"
   },
   "bikes":{
      "name":"c",
      "age":"110",
      "height":"10",
      "location":"park"
   },.........................

我正在构建一个搜索功能，其中用户搜索的任何内容都可以在上述 json 文件的名称和位置中过滤并发送到子组件（例如 searchTerm =c 然后发送名称或位置中有c的名称年龄高度位置）

这就是我如何通过相同的 json 映射的完全不同的组件，它工作正常。

{ Object.entries(props.data).map(
    ([key, {
      ...e
     }]) => {
        return (<tr>
            <SingleData key={key}
                {...e}
            /> </tr>
        )
    }
)}



const searchHandler = (string) => {
     setsearchTerm(string)
     if (searchTerm!==""){
       const filtered= Object.entries(Data).filter(
         ([key, { 
           ...e
          }]) => {
             return ( 
               console.log(Object.values(name).toLowerCase().includes(searchTerm.toLowerCase()))
             )
         }
     )
       setSearchResults(filtered)
     }
     else{
       setSearchResults(Data)
     }
   }

这里我尝试在过滤后将数据作为 setSearchResults 发送到子组件。 searchTerm 处于使用状态，正在使用用户的搜索字符串进行更新。

但是这种方法没有给我任何东西。请帮我弄清楚如何完成这项工作

【问题讨论】：

您的过滤器函数应返回一个布尔值，指示是否将其保留在列表中。你返回一个 console.log 的结果，这是错误的。
是的，我做了 console.log 来找出发生了什么，是的，我弄错了，我不知道为什么。你能帮我找出正确的方法吗
以上评论有你需要纠正的一切......
@trincot 我该怎么做
不要在 return 表达式中调用 console.log。所以......呃......只是不要？你是说你不明白窗台在说什么？我的意思是：console.log 总是返回 undefined... 所以你返回 undefined。既然这不是你想要的，......不要这样做。将插入符号放在 console.log 的 c 上，然后按 Del 键直到它消失。

标签： javascript reactjs json

【解决方案1】：

如果您想将过滤项目作为嵌套数组包含[key, obj]，您可以这样做：

const data = {
  "trees": {
    "name": "a",
    "age": "9",
    "height": "10",
    "location": "park"
  },
  "cars": {
    "name": "b",
    "age": "30",
    "height": "10",
    "location": "park"
  },
  "bikes": {
    "name": "c",
    "age": "110",
    "height": "10",
    "location": "park"
  }
}

const searchTerm = 'C';
const filtered = Object.entries(data).filter(
    ([key, obj]) =>obj.name.toLowerCase().includes( searchTerm.toLowerCase() ) );

console.log(filtered)

如果您只想过滤 filtered 变量中的对象，您可以在完成搜索后映射结果，如下所示：

const filtered = Object.entries(data).filter(
([key, obj]) =>obj.name.toLowerCase().includes( searchTerm.toLowerCase() ) ).map(item => item[1]);

【讨论】：

好的，如果我使用映射，那么我可以将过滤后的值作为过滤后的值发送到我的子组件？
如果没有 .map 会怎样？
是的，你可以用filtered 变量做任何你想做的事情，没有映射你的结果会是这样的：[ ['bikes', {name: 'c', ...} ] ]。使用地图，您的结果将是这样的：[ {name: 'c', ...} ]