How to approach filtering CMS items based on JSON values?

Design help CMS
1
  1. User fills out form => submit => with custom javascript create POST request JSON body to send to an API
  2. Receive API JSON response with a result array field which contains job objects
  3. Access the API response JSON job object ids and pass them to the CMS filter to display jobs with the given ids from the CMS collection items

Is this possible in Webflow, how could I approach this problem?

2

You can do this purely with client-side JS, unless your API is secured with an API token. If you have an API token you need to submit, you will need the API access piece to run server-side. I use Netlify’s serverless functions, or Cloudflare workers often for this type of work, but there are many you can choose from.

You can also modify the result, or cache it, if those benefit your client-side JS.

Three main issues here;

  • Getting CMS IDs to work with
  • Filtering large data sets, if you have a lot of records
  • Security

The primary way to do filtering in Webflow is to load all of the data and then filter it down to the content you want. I typically do this using FS Filter and FS Load, which are pretty performant for up to say 3000 items. That takes a couple of seconds to load all 3000 items. You’d apply your filter on the initial page load so that only the relevant postings appear.

Security can be an issue in the sense that all of the data is in the page. Here you’re not trying to show user-owned data, so that’s probably fine.

The filtering field is a problem. Webflow doesn’t expose CMS item IDs locally, so there is no way to filter on them. I’d recommend you use something different like the slug or an alt-id you’ve created.

If you must use CMS item ID, you’ll need to create an additional field in your CMS to store that ID, and then have an automation process populate that field every time a new record is created in the CMS. You’ll also have to go through every existing item and populate that field.

Bigger issue- if you ever do a backup restore, all of those IDs change, so make this a script or process you can run efficiently to repopulate your accessible ID field.

50% of this work is because you’re using the CMS for your job postings. A better way to build this is to have the job postings somewhere accessible, and then have your middle tier combine it into the result. You get everything you need, and then you just turn it into pretty HTML in your client script. I recommend design your elements visually, and then use custom attributes to identify where you will bind your data, then you have a nice designable template piece.

If you want to make all of this much easier, or are not proficient with JS, Wized is designed for exactly this type of construction. You’d still have some issues to resolve on how to get your CMS data, but you’ll have some pre-built options as well.