How to interpret the `items` array in the filtering conditions API, used to build the front-end filter?

In modern web design, the content filtering feature has become an important component for 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.For AnQi CMS, the API for its provided filtering conditions (/api/archive/filtersIt is the foundation for building such front-end filtering functions. Especially in the response data,itemsthe array, which is the key to understanding and implementing dynamic filtering.

the foundation of filtering conditions:archive/filtersAPI

Of Security CMSarchive/filtersAn interface that provides all available filtering conditions under a specified content model for the front-end. When you need to build a filter for a module (such as an article module, product module), you just need to call this API and pass in the correspondingmoduleIdFor example,GET /api/archive/filters?moduleId=1It 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 of the filter, such as 'City' or 'Education', for easy understanding.
• field_nameThis attribute is crucial, as it represents the field name that needs to be used as a URL parameter when performing content queries. For example, ifnameis 'City', thenfield_namemay be justcity.
• itemsThis is the focus of our day, it is an array that contains all the specific items available under the current filter.

In-depth analysisitemsarray

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

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

• total: Number of items under the current option totalThe property indicates the current filter option (i.e.labelUnderneath, the total number of documents matched by AnQi CMS. This number has a high practical value on the frontend interface.For example, you can display "Beijing (123)" to the user, directly telling them that after selecting "Beijing" as a condition, they will find 123 relevant articles.

  Furthermore,totalThe value can still help you optimize the user experience:

  • Smart disable/hide:If an option'stotalFor 0, it means 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 users feeling confused when they click and find no content.
  • Visual feedback:The existence of numbers can provide users with an expectation, allowing them to understand the number of possible results before clicking.

Practical steps for building a frontend filter

UnderstooditemsAfter the structure of the array, we can proceed to apply it to the construction of the frontend filter:

1. Get filtered data:Firstly, when the page loads, by making an asynchronous request to call/api/archive/filtersAn interface carrying the respectivemoduleId. This will retrieve all available filtering conditions of the module and itsitemsarray.
2. Parsing and rendering:After receiving the response data, traversedataArray. For each filter object, extract itsnametitle as the filter, extractfield_namename as the parameter for subsequent queries. Next, traverse theitemsarray, using eachitemoflabelRender the front-end filtering options (for example, create a series of buttons or dropdown menu items). At the same time, you can alsototaldisplay the value inlabeladjacent to the document count, or based ontotalWhether 0 determines the availability of the option.
3. Build query parameters:When a user selects one or more filter options on the front end, you need to dynamically construct query parameters based on their choices. For example, if the user infield_nameWithcityhas selected the filterlabelFor the option of 'Beijing', you need tocity=北京This parameter should be added to your content list API request. If the Anqi CMS supports multiple selections, multiple selection values are usually separated by commas (such ascity=北京,上海), for more details please refer to/api/archive/listDescription of custom filtering parameters in the interface.
4. Initiate a content list request:Send the constructed filtering parameters along with other parameters such as pagination, sorting, and so on./api/archive/listThe interface will return a list of documents that meet all the filtering conditions for front-end display.
5. Update the filter status (optional):In some complex filtering scenarios, after the user selects a filter condition, you may need to call againarchive/filtersInterface