How to dynamically build frontend filtering UI based on the response of `archiveFilters`, such as dropdown menus or checkboxes?

How to let users quickly find the information they are interested in, in today's increasingly rich website content, is a crucial operational issue.AnQiCMS provides powerful content management capabilities, and its API interface lays a solid foundation for front-end developers to build flexible and varied interactive interfaces.archiveFiltersThe response data of the interface dynamically constructs the frontend filter UI, such as common dropdown menus or checkboxes.

The value of the dynamic filtering interface

UnveilingarchiveFiltersThe interface: the data source of the filtering conditions

Anqi CMS'sarchiveFiltersThe interface is the core of realizing this function. It allows us to obtain the list of filtering conditions for the specified content model.

It is very simple to call this interface, just send{域名地址}/api/archive/filtersaGETRequest, and include a required parameter.moduleId.moduleIdThis indicates the filtering conditions for the content model you want to retrieve (such as article model, product model, etc.).

The response data structure of this interface is clear and concise, usually returning an array containing multiple filter objects. Each filter object includes several key pieces of information:

• name: This is the Chinese name that should be used for display on the front end of the filter, such as “City”, “Education” and so on, which users will see directly.
• field_nameThis is the backend field name corresponding to the filter, for example.city/certificateThis name is very important because when the user selects a filter condition, we will use thisfield_nameAs a parameter name, it is sent along with the user's selected value.archiveListThus, it can obtain the document list that meets the conditions.
• itemsThis is an array that includes all available options of the current filter. Each option also containslabel(the actual displayed option text, such as 'Beijing', 'Bachelor') andtotalThe value indicates how many documents are under this option, although it is displayed as 0 in the example, it can be used in actual projects to display the number as needed.

By parsing this response, we can learn which filtering dimensions the current content model supports and what specific options each dimension has.

{
  "code": 0,
  "data": [
    {
      "name": "城市",
      "field_name": "city",
      "items": [
        { "label": "全部", "total": 0 },
        { "label": "北京", "total": 0 },
        { "label": "上海", "total": 0 }
      ]
    },
    {
      "name": "学历",
      "field_name": "certificate",
      "items": [
        { "label": "全部", "total": 0 },
        { "label": "硕士", "total": 0 },
        { "label": "本科", "total": 0 }
      ]
    }
  ],
  "msg": ""
}

Practical steps for dynamically building the frontend UI.

HencearchiveFiltersThe powerful data provided, the next step is how to convert this data into a user-friendly filtering interface on the front end.

Step 1: Obtain the filtering data

Firstly, when the page loads, or when the user switches content models, we need to callarchiveFiltersInterface to fetch the latest filtering conditions. This is usually an asynchronous operation that can be performed using JavaScript'sfetchoraxioslibraries to complete.

async function fetchFilters(moduleId) {
  try {
    const response = await fetch(`/api/archive/filters?moduleId=${moduleId}`);
    const result = await response.json();
    if (result.code === 0) {
      return result.data; // 返回筛选器数据数组
    } else {
      console.error('获取筛选条件失败:', result.msg);
      return [];
    }
  } catch (error) {
    console.error('请求筛选条件接口出错:', error);
    return [];
  }
}

Second step: Parse and render UI components

Get todataAfter the array, we can iterate through it, dynamically creating frontend UI elements for each filter. For each filter object, we can create a frontend UI element based on itsnameCome as the title of the filter area,field_nameWill be used as the parameter name for the backend request,itemsThe array is used to generate specific options.

Here, we can decide according to actual needs whether to use a dropdown menu (<select>) or a multiple choice box (<input type="checkbox">).

Create a dropdown menu (suitable for single selection filtering, such as "City"):

If a user typically only selects one value for a filtering dimension (such as 'City'), a dropdown menu is a concise and effective choice.

function renderDropdownFilter(filterData) {
  const filterContainer = document.getElementById('filters-area'); // 假设页面上有一个ID为'filters-area'的容器
  const div = document.createElement('div');
  div.className = 'filter-group';

  const label = document.createElement('label');
  label.textContent = filterData.name + ':';
  div.appendChild(label);

  const select = document.createElement('select');
  select.setAttribute('data-field-name', filterData.field_name); // 存储field_name，方便后续获取选中的值

  filterData.items.forEach(item => {
    const option = document.createElement('option');
    option.value = item.label === '全部' ? '' : item.label; // 如果是“全部”选项，值可以设置为空字符串
    option.textContent = item.label;
    select.appendChild(option);
  });

  select.addEventListener('change', (event) => {
    // 处理用户选择的变化，触发文档列表更新
    // 例如：updateArchiveList(filterData.field_name, event.target.value);
    console.log(`选中 ${filterData.name}: ${event.target.value}`);
  });

  div.appendChild(select);
  filterContainer.appendChild(div);
}

Create a multi-select group (suitable for multi-select filtering, such as 'tags' or certain custom attributes):

If a user might need to select multiple values for a filter dimension (such as filtering multiple 'specialties'), a group of checkboxes would be more suitable.

filterData.items.forEach(item => {

// 排除“全部”选项，多选框通常不需要