In modern web design, the content filtering feature has become an important part of improving user experience and content discoverability.A well-designed filter can help users quickly locate the information they are interested in, whether it is products, articles, or any other form of content./api/archive/filters）is the foundation for building such front-end filtering functions. In particular, the response data in it is crucial for understanding and implementing dynamic filtering.itemsarray, which is the key to understanding and implementing dynamic filtering.

is the foundation of filtering conditions:archive/filtersAPI

Anqi CMS'sarchive/filtersAn interface whose core function is to provide all available filter conditions under the specified content model for the front-end. When you need to build a filter for a module (such as the article module, product module), you just need to call this API and pass in the correspondingmoduleIdFor example,GET /api/archive/filters?moduleId=1This will return all the filter configurations of the article module.

The response data structure of this API is clear, with the outermost layer beingdatais an array, each object in the array represents an independent filter. Each filter object contains three key attributes:name/field_nameanditems.

  • nameThis is the name displayed on the user interface for the filter, such as "City" or "Education", making it easy for users to understand.
  • field_nameThis property is crucial, as it represents the field name that needs to be used as a URL parameter when performing actual content queries. For example, ifnameit is 'city', thenfield_nameit may becity.
  • itemsThis is the highlight of today, which is an array containing all the specific options available under the current filter.

In-depth analysisitemsarray

itemsAn array is a collection of specific options within each filter. Each element in the array is an independent object, typically containinglabelandtotalThese two properties, together they constitute the complete information of each option of the front-end filter.

  • label: The display text of the filter options. labelThe value of the attribute is the option name that users see directly on the frontend interface. For example, in a 'City' filter,itemsin an array.labelIt may be 'Beijing', 'Shanghai', 'Chongqing', etc. It is a friendly name for the filter options, which is presented directly to the user. When building the front-end interface, you will use theselabelCreate dropdown menus, checkboxes, radio buttons, or tag clouds, etc., as filtering controls.

  • total: The number of items under the current option. totalProperties represent the current filtering option (i.e.,labelUnder, the total number of documents matched in the security CMS.This number has a high practical value on the front-end interface.For example, you can display it to users as 'Beijing (123)', which makes it intuitive to tell them that selecting 'Beijing' will find 123 relevant articles.

    Furthermore,totalThe value can also help you optimize user experience:

    • Smart disable/hide:If some option'stotalThe value is 0, indicating that there is no content in the current database that meets the condition. You can disable or hide this option on the front end to avoid confusion when users click and find no content.
    • Visual feedback:The presence of numbers can provide users with an expectation, allowing them to have an understanding of the number of possible results before they click.

Practical steps for building front-end filters

UnderstooditemsAfter the structure of the array is established, we can proceed to apply it to the construction of the front-end filter:.

  1. To get the filtering data:.Firstly, when the page is loaded, call asynchronously./api/archive/filtersinterface, and carry the correspondingmoduleId. This will obtain all available filtering conditions of the moduleitemsarray.
  2. Parsing and rendering:After receiving the response data, traversedataArray. For each filter object, extract itsnameas the title of the filter, extractfield_nameas the parameter name for the subsequent query. Then, iterate over itsitemsarray, using eachitemoflabelRender the frontend filtering options (e.g., create a series of buttons or dropdown menu items). At the same time, you can usetotalthe value inlabeldisplay the document count next to, or based ontotalWhether 0 is used to determine the availability of the option.
  3. Build query parameters:When the user selects one or more filter options on the frontend, you need to dynamically construct query parameters based on their selections. For example, if the user has selectedfield_nameresponse forcityfilter has been selectedlabelAn option for "Beijing", then you need tocity=北京This parameter should be added to your content list API request. If the Safe CMS supports multiple selections, multiple selection values are usually separated by commas (such ascity=北京,上海), for more details, please refer to/api/archive/listInterface custom filter parameter description.
  4. Initiate a content list request:Send the constructed filter parameters, along with other parameters such as pagination and sorting, all at once./api/archive/listThe interface will return a list of documents that meet all the filtering conditions, for front-end display.
  5. Update filter status (optional):In some complex filtering scenarios, when the user selects a filter condition, you may need to call againarchive/filtersInterface