搜索嵌套数据答案

【问题标题】：Searching through nested data搜索嵌套数据
【发布时间】：2021-08-12 18:53:29
【问题描述】：

我不知道这个搜索功能有什么问题？我希望能够搜索“鸟”或“蛇”这个词。此外，最好忽略其中没有该文本的任何对象。我很困惑，因为这个人从不使用她的“动物”对象数组，而且我从来没有看到实际调用过 getEachItem？

const SlideData = [
  {
    id: 1,
    title: "Slide 0",
    layout: "standard",
    content: [
      {
        id: 1,
        type: "paragraph",
        text: "this has the word cat."
      },
      {
        id: 2,
        type: "space",
        height: "1em"
      },
      {
        id: 3,
        type: "paragraph",
        text: "this has the word snake."
      }
    ],
  },
  {
    id: 2,
    title: "Slide 1",
    layout: "standard",
    content: [
      {
        id: 1,
        type: "paragraph",
        text: "This has the word bird."
      },
      {
        id: 2,
        type: "space",
        height: "1em"
      },
      {
        id: 3,
        type: "paragraph",
        text: "This has the word bear."
      }
    ],
  }
];
export default SlideData;

import SlideData from "./SlideData";

const SearchResults = () => {
  const searchTerm = "bird";
  let result = [];

  function getEachItem(object) {
    object.forEach((item) => {
      searchItem(item);
    });
    let uniqueResults = [...new Set(result)];
    return uniqueResults.length;
  }
  function searchItem(item) {
    SlideData.forEach((key) => {
      if (typeof item[key] === "object") {
        searchItem(item[key]);
      }
      if (typeof item[key] === "string") {
        let searchAsRegEx = new RegExp(searchTerm, "gi");
        if (item[key].match(searchAsRegEx)) {
          result.push(item.id);
        }
      }
    });
  }

  return (
    <div>
      <h1>Results</h1>
      <p>{result}</p>
      <button type="submit" onClick={searchItem}>
        Search
      </button>
    </div>
  );
};
export default SearchResults;

【问题讨论】：

标签： javascript arrays reactjs search nested

【解决方案1】：

看起来您正在对 searchItem 进行递归调用，但您从未指定返回条件来弹出调用堆栈并将控制流返回给原始调用者

function searchItem(item) {
    SlideData.forEach((key) => {
      if (typeof item[key] === "object") {
        /** return result of recursive call **/
        return searchItem(item[key]);
      }
      if (typeof item[key] === "string") {
        let searchAsRegEx = new RegExp(searchTerm, "gi");
        if (item[key].match(searchAsRegEx)) {
          result.push(item.id);
        }
      }
      /** return and pop call stack
       * since you pushed an item to the result array
       **/
      return;
    });
  }

最好让 searchItem 函数完成所有迭代并返回数组结果，而不是递归地尝试将项目推送到全局数组中。您正在将范围与您现在的操作方式混合在一起

【讨论】：

【解决方案2】：

教程通常是不费吹灰之力的事情。这篇文章的作者似乎正在分享他们为另一个项目编写的部分实现，并发布它以尝试获得反馈。他们不是在编写具有完整搜索实现的应用程序。

在您的情况下，要使搜索对“鸟”以外的术语起作用，您必须将searchTerm 作为传递给函数的参数。您还必须设置表单和显示区域以放入结果。

重申一下，本教程只是为您提供了完整应用程序的一部分。您必须自己设置其余部分。

【讨论】：