过滤嵌套数组并返回具有匹配类别的对象

Question

我正在使用 react+ nextJS 并抓取静态对象“帖子”。目标是在每个帖子上创建一个“相关帖子”组件，该组件抓取三个包含至少一个类别的帖子。这是我在 AllPosts 上运行地图时的样子（我把它剪掉了，这样更容易阅读）：

const allPosts = getAllPosts(['title', 'categories'])

[{
  title: 'Black History Month: A History in Black Cinematography',
  categories: [ 'education' ]
}
{
  title: 'New Kid on the Block',
  categories: [ 'announcements', 'new hires' ]
}
{
  title: 'Olivia Boldt: Bol(d)ting Into the Bakery',
  categories: [ 'announcements', 'new hires' ]
}
{
  title: 'PDF Presets in Adobe Illustrator. Which one should you use?',
  categories: [ 'Research', 'education' ]
}
{
  title: 'Pixel Bakery does XYZ',
  categories: [ 'press & media', 'announcements' ]
}
{
  title: 'Recipe for Success: Mix Adaptability and Confidence (together, in a medium sized bowl)',
  categories: [ 'editorial', 'second cat', 'third cat' ]
}
{
  title: 'Samee Callahan: A Winding Path to Excitement',
  categories: [ 'announcements', 'new hire' ]
}
{
  title: 'Sophia Stueven’s Favorite Way to Breathe',
  categories: [ 'announcements', 'new hires' ]
}]

到目前为止，我可以让它匹配具有相同 [0] 类别的帖子，但我无法思考如何比较所有帖子：

const allPosts = getAllPosts(['title', 'categories'])
const SearchCat = post.categories[0]
const matchingPosts = allPosts.filter((item) => item.categories[0] === SearchCat)
console.log(matchingPosts)

产量：

  [{
    title: 'An Introduction to our Technology Stack',
    categories: [ 'announcements', 'new hire' ]
  },
  {
    title: 'New Kid on the Block',
    categories: [ 'announcements', 'new hires' ]
  },
  {
    title: 'Olivia Boldt: Bol(d)ting Into the Bakery',
    categories: [ 'announcements', 'new hires' ]
  },
  {
    title: 'Samee Callahan: A Winding Path to Excitement',
    categories: [ 'announcements', 'new hire' ]
  },
  {
    title: 'Sophia Stueven’s Favorite Way to Breathe',
    categories: [ 'announcements', 'new hires' ]
  }]

如何添加另一个过滤器层，它不关心类别匹配所在的位置，只需要其中一个匹配？

Answer 1

您似乎还有其他问题，所以这里有一个针对您的用例量身定制的示例。

1. 如何让搜索忽略区分大小写

您可以将currentPost.categories 数组映射到Set 转换每个类别toUpperCase() 并在filter() 调用中执行相同的操作。

post.categories.some(category => searchCategories.has(category.toUpperCase()));

1. 如何从返回列表中排除当前帖子

您可以在过滤器中添加条件以在查找类别之前查找currentPost。 （这里使用title，但也许你有一个id 或其他你可以使用的独特属性）。

1. Typescript 不喜欢 .some：“类型 'string' 上不存在属性 'some'”

那是因为some() 是一个数组方法，您似乎正试图在字符串上调用它。

const currentPost = {
    title: 'New Kid on the Block',
    categories: ['Announcements', 'new hires']
};

// const allPosts = getAllPosts(['title', 'categories'])
const allPosts = [{title: 'Black History Month: A History in Black Cinematography', categories: ['education']}, {title: 'New Kid on the Block', categories: ['announcements', 'New Hires']}, {title: 'Olivia Boldt: Bol(d)ting Into the Bakery', categories: ['announcements', 'New Hires']}, {title: 'PDF Presets in Adobe Illustrator. Which one should you use?', categories: ['Research', 'education']}, {title: 'Pixel Bakery does XYZ', categories: ['press & media', 'announcements']}, {title: 'Recipe for Success: Mix Adaptability and Confidence (together, in a medium sized bowl)', categories: ['editorial', 'second cat', 'third cat']}, {title: 'Samee Callahan: A Winding Path to Excitement', categories: ['announcements', 'new hire']}, {title: 'Sophia Stueven’s Favorite Way to Breathe', categories: ['announcements', 'new hires']}];

// Map the currentPost categories array to a Set for lookup in the filter
const searchCategories = new Set(currentPost.categories.map(category => category.toUpperCase()));

const matchingPosts = allPosts.filter(post => {
    // If the currently iterated post title matches the currentPost return false (filter it out);
    if (post.title === currentPost.title) {
        return false;
    }

    // Otherwise, check if the currently iterated post has some() categories in common with currentPost
    return post.categories.some(category => searchCategories.has(category.toUpperCase()));
});

console.log('Current Post:\n');
console.log(currentPost);

console.log('Matching Posts:\n');
console.log(matchingPosts);