在 Javascript (React) 中使用搜索栏过滤 BIG 嵌套 JSON 中的值

Question

我正在尝试创建一个搜索栏来过滤嵌套 JSON 中的 TITLES。

这是我的 JSON 结构的一个小样本。

listOfArticles = {
     "HOME": {
          "0": {
               "title": "Wall Street CEOs try to come up with new plan for First Republic",
               "link": "www.ft.com/content/b67d2ab3-03bc-49fd-ac60-887373a64137"},
          "1": {
               "title": "Markets Briefing",
               "link": "www.ft.com/content/d1d3acd2-af70-4348-b617-406ce11ca259"},
          "2": {
               "title": "Bid deadline for failed Silicon Valley Bank is extended as buyers hold back",
               "link": "www.ft.com/content/2cbd90b6-dbca-4589-a8db-7195940fba8e"}
     }
     WORLD": {
           "0": {
                "title": "Xi praises Putin\u2019s \u2018strong leadership\u2019 in Kremlin talks",
                "link": "www.ft.com/content/c82f1a91-8b60-40b6-81d9-494cf7ec2325"},
           "1": {
                "title": "IMF approves $3bn bailout for Sri Lanka ",
                "link": "www.ft.com/content/96b9bee1-401c-418e-b92a-3e7cfb6d59a6"},
           "2": {
                "title": "VW\u2019s plans to pull out of Russia
                "link": "www.ft.com/content/7ecb9822-d6d0-4186-9dad-4943fbde31a4"}
     } 
     "UK"  : {
          "0": {
               "title": "London police force should be overhauled or broken up, says review",
               "link": "www.ft.com/content/a9467416-a7ea-4611-9554-b69d50aafd4d"}
          "1": {
               "title": "Labour calls for review of impact of financial sector uncertainty on UK ",
               "link": "www.ft.com/content/6a48d3d2-20a8-4059-98fd-1965196051fd"},
          "2": {
               "title": "Sturgeon admits SNP leadership election has been \u2018difficult\u2019",
               "link": "www.ft.com/content/9658b054-6483-499f-94b9-94eb2f992660"}
     }

这是我的代码...

import { useEffect, useState } from 'react';
const [searchWord, setSearchWord] = useState("")

  const filteredArticles = Object.keys(listOfArticles).map(page => {
    return (
      Object.keys(listOfArticles[page]).filter(function(item){
        console.log(listOfArticles[page][item].title) //This log works as expected
        return (
          <div>
            {listOfArticles[page][item].title.toLowerCase().includes(searchWord.toLowerCase())}
          </div>
        )
      })
    )
  })

console.log(filteredArticles)
return (
    <div>
        <input type='text' placeholder='Search...' onChange={ (userInput) => {
        setSearchWord(userInput.target.value)
        }}/>
        {filteredArticles}
    </div>
  );
}

我也试过用

Object.keys()

替换

Object.entries()

，但不确定我是否正确使用它。

我在底部返回中删除了相当大的代码块，它可以毫无问题地循环遍历未过滤的 JSON。

我想做什么： 目前

filteredArticles

返回一个数组，但它甚至不接近我想要的。我希望它以完全相同的格式返回 JSON，并删除不在搜索词中的对象。对象即

{"0": {"title": ###, "link": ###}}

非常感谢。

Answer 1

我建议您将对象更改为数组，就像您始终将“0”、“1”等作为键一样，这并不是真正必要的。数组也有更强的排序保证。

listOfArticles = {
     "HOME": [{
               "title": "Wall Street CEOs try to come up with new plan for First Republic",
               "link": "www.ft.com/content/b67d2ab3-03bc-49fd-ac60-887373a64137"
              },
              ]
}

在您的情况下，重要的是要确保您了解过滤器和地图功能。如果你从过滤器返回一些东西，它将包含在最终渲染中，因为你总是返回它是没有用的。

你需要把它分成两步，首先过滤你想要的所有行，然后显示它们。

const filteredArticles = Object.keys(listOfArticles).map(page => {
    return (
      Object.keys(listOfArticles[page])
      .filter(function(item){
        console.log(listOfArticles[page][item].title) //This log works as expected
        
        return listOfArticles[page][item].title.toLowerCase().includes(searchWord.toLowerCase())
      })
      .map(function (item) {
        // here you should have already filtered rows
        return (
          <div>
            {listOfArticles[page][item].title}
          </div>
        )
      })
    )
  })