Dynamic Filtering of items in EDS | Community
Skip to main content
Level 2
February 20, 2025
Solved

Dynamic Filtering of items in EDS

  • February 20, 2025
  • 1 reply
  • 502 views

Hey everyone, 

 

I am trying to implement a Blogs feature in EDS. I am doing this by creating a dynamic feed from query-index.json using JS fetch. 

async function loadJSON(path) { if (path) { const resp = await fetch(path); if (resp.ok) { return await resp.json(); } } return null; }

This happens in a block with the json path.
1. For the URL: `/blogs/` I am fetching all blogs without filtering
2. For Tagging, I am using static URLs: `/blogs/<tag>` and adding a filter through the block className by adding a (tag)

I have a few questions:
For Dynamic filtering, what should I use? Is there a best practice, instead of using static URLs? Are there any other best practices for blogs in EDS?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by PavanGaddam

@osmanwa Instead of static URLs i would recommend, using the query parameters to do the filtering during the querying itself. Something like -

 

/blogs?tag=tech&author=john&date=2025

 

 

The code would look like -

 

// In your block's JS export default async function decorate(block) { const urlParams = new URLSearchParams(window.location.search); const tag = urlParams.get('tag'); const author = urlParams.get('author'); // Build query path with filters let queryPath = '/query-index.json?limit=20'; if (tag) queryPath += `&tag=${tag}`; if (author) queryPath += `&author=${author}`; const data = await loadJSON(queryPath); // Render your blogs with the data }

 

 

This approach offers several advantages:

  • Multiple filter parameters simultaneously
  • Easy to bookmark and share
  • SEO-friendly when implemented properly
  • Doesn't require new page configurations for each tag

1 reply

PavanGaddamAdobe EmployeeAccepted solution
Adobe Employee
March 12, 2025

@osmanwa Instead of static URLs i would recommend, using the query parameters to do the filtering during the querying itself. Something like -

 

/blogs?tag=tech&author=john&date=2025

 

 

The code would look like -

 

// In your block's JS export default async function decorate(block) { const urlParams = new URLSearchParams(window.location.search); const tag = urlParams.get('tag'); const author = urlParams.get('author'); // Build query path with filters let queryPath = '/query-index.json?limit=20'; if (tag) queryPath += `&tag=${tag}`; if (author) queryPath += `&author=${author}`; const data = await loadJSON(queryPath); // Render your blogs with the data }

 

 

This approach offers several advantages:

  • Multiple filter parameters simultaneously
  • Easy to bookmark and share
  • SEO-friendly when implemented properly
  • Doesn't require new page configurations for each tag