Needs help filtering posts on Contentful using javascript for a Next.js site

Question

I'm feeding a Next.js blog with Contentful and querying for some posts at the frontpage. And even tho I can .filter() featured posts by using a simple boolean value I can't seem to understand how could I fetch posts for matching categories within my post structure.

Here's a sample of what my query for featured posts looks like.

{posts.filter((posts) => (posts.fields.postDestaque)) // it filters posts that have 'postDestaque' false or null
   .slice(0, 6) // cuts off the excess 
   .map((post, i) => { // maps the posts and returns the component
   
   return <PostVertical key={i} post={post} noCats={noCats} noData={noData} />
})}

The categories are held within an array with objects of fields that contain names and slugs for each one like this:

0:
  fields:
    categorias: Array(2)
      0:
        fields:
          nome: "Main Category"
          slug: "main-category"
      1:
        fields:
          nome: "Other Category"
          slug: "other-category"

I'm a front-end guy so I don't know how to filter the posts for a category. I thought .find() could work, but it would only return the object that matches with it, so, the category itself. Plus I'm not understanding how I could reach for a second array and test the post object itself. Is there another method I could use instead of filter or find?

Thanks a lot for any comments on this.

Answer 1

If its an array you're trying to filter, you can get away with just using .filter and .some I added small snippet below, but you just want to make sure that you return a boolean once you find the category want to filter in, .some does that.

posts.filter(post => post.fields.categorias.some(categoria => categoria.slug === 'main-category'));

const posts = [{
    fields: {
      categorias: [{
          noma: 'Main Category',
          slug: 'main-category',
        },

        {
          noma: 'Other Category',
          slug: 'other-category',
        },
      ],
    },
  },
  {
    fields: {
      categorias: [{
          noma: 'Main Category1',
          slug: 'main-category1',
        },

        {
          noma: 'Other Category1',
          slug: 'other-category1',
        },
      ],
    },
  },
  {
    fields: {
      categorias: [{
          noma: 'Main Category2',
          slug: 'main-category2',
        },

        {
          noma: 'Other Category2',
          slug: 'other-category2',
        },
      ],
    },

  },
];

const byCategory = category => post => post.fields.categorias.some(categoria => categoria.slug === category);
const byMainCategory = byCategory('main-category');
const filteredByCategorias = posts.filter(byMainCategory)

console.log("filtered by categorias", filteredByCategorias)