How to filter out data which is coming from data model?

General
1

Hiiii,
I have created page for Testimonials. There are certain categories like A,B,C etc.
When I click on the A Testimonial with category p should display. like wise other.
How to achieve this?
I try the Query option in the data model but its not filtering the data.
There is any another option to filtering data?
Thanks !

2

Hello @Dhanashree,

To filter testimonials by categories in Builder.io, you’ll want to make use of data models effectively. Here’s a step-by-step approach:

1. Set Up Your Data Model

  • Create a Testimonials data model in Builder.
  • Add a category field (e.g., “A”, “B”, “C”).

Tip: Use a custom field of type Select with predefined options for categories.

2. Query Testimonials by Category

Use Builder’s Content API to fetch testimonials filtered by category. For example, with Next.js:

import { builder } from '@builder.io/sdk';

builder.init('YOUR_API_KEY');

export async function getTestimonialsByCategory(category) {
  return await builder.getAll('testimonials', {
    query: {
      'data.category': category,
    },
    prerender: false,
  });
}

3. Connect Category Selection to Queries

When a user clicks a category (A, B, or C), capture that choice via URL params or state management and pass it to the query.

export default function Testimonials({ category }) {
  const [testimonials, setTestimonials] = React.useState([]);

  React.useEffect(() => {
    getTestimonialsByCategory(category).then(setTestimonials);
  }, [category]);

  return (
    <div>
      {testimonials.map((t) => (
        <div key={t.id}>
          <h3>{t.data.title}</h3>
          <p>{t.data.content}</p>
        </div>
      ))}
    </div>
  );
}

For more details, see the guide on integrating structured data.

If this doesn’t resolve the issue, please share a screen recording and the content setup in Builder, and we’ll be happy to help further.

Thanks!

3

Thanks ! @manish-sharma
There any other solution using builder.io functionality without using code ?

4

Hello @Dhanashree

Yes! You can use the Connected Data Filter option to filter your data directly in Builder. Here’s a Loom that demonstrates how to use the Builder editor to filter data without writing any code:

Additionally, you can also use AI prompts to connect your testimonial data and filter it based on your requirements. This approach works seamlessly as well.

For more details on connecting and filtering data, check out the documentation here: