如何基于分类动态过滤JSON数据？多子类适配问题求助

嘿，这个问题我之前帮好几个开发者解决过，其实核心就是把硬编码的子类判断改成动态匹配+遍历渲染的逻辑就行！我给你一步步拆解实现思路，附上代码示例，你可以直接套用到你的项目里。

先明确常见的JSON数据结构（假设你的结构类似） #

首先先假设你的JSON数据大概是这样的（如果结构不同，调整逻辑就行）：

{
  "categories": [
    {
      "name": "电子产品",
      "subcategories": [
        {
          "id": "subcat-1",
          "name": "手机",
          "items": ["iPhone 15", "Galaxy S24", "小米14"]
        },
        {
          "id": "subcat-2",
          "name": "笔记本",
          "items": ["MacBook Pro", "ThinkPad X1", "拯救者Y9000P"]
        },
        {
          "id": "subcat-3",
          "name": "耳机",
          "items": ["AirPods Pro 2", "Sony WH-1000XM5"]
        }
      ]
    }
  ]
}

步骤1：动态渲染所有子类的触发元素 #

不要手动写每个子类的按钮/链接，而是遍历JSON里的subcategories数组，自动生成所有子类的交互元素，同时给每个元素绑定点击事件，传递当前子类的信息。

原生JavaScript示例： #

// 假设你已经通过fetch/axios获取到了JSON数据，存在data变量中
const subcategoryContainer = document.getElementById('subcategory-buttons');

// 遍历所有分类下的子类，生成按钮
data.categories.forEach(category => {
  category.subcategories.forEach(subcat => {
    const btn = document.createElement('button');
    btn.textContent = subcat.name;
    // 给按钮绑定点击事件，把当前子类对象传进去
    btn.addEventListener('click', () => renderItems(subcat));
    // 可选：给按钮加唯一标识，方便后续加激活样式
    btn.dataset.subcatId = subcat.id;
    subcategoryContainer.appendChild(btn);
  });
});

步骤2：编写通用的条目渲染函数 #

写一个通用函数，接收选中的子类对象作为参数，清空之前的条目列表，然后渲染该子类下的所有条目。

原生JavaScript示例： #

function renderItems(selectedSubcat) {
  const itemsContainer = document.getElementById('items-list');
  // 先清空容器
  itemsContainer.innerHTML = '';

  // 遍历当前子类的条目，逐个渲染
  selectedSubcat.items.forEach(item => {
    const itemCard = document.createElement('div');
    itemCard.className = 'item-card';
    itemCard.textContent = item;
    itemsContainer.appendChild(itemCard);
  });

  // 可选：给选中的按钮加激活样式
  document.querySelectorAll('#subcategory-buttons button').forEach(btn => {
    btn.classList.remove('active');
  });
  document.querySelector(`[data-subcat-id="${selectedSubcat.id}"]`).classList.add('active');
}

如果你用前端框架（比如React/Vue），思路更简洁 #

以React为例，用状态管理选中的子类，然后动态过滤渲染：

import { useState } from 'react';

export default function ItemFilter({ data }) {
  // 用状态保存选中的子类
  const [selectedSubcategory, setSelectedSubcategory] = useState(null);

  return (
    <div className="item-filter">
      {/* 动态渲染子类按钮 */}
      <div className="subcategory-buttons">
        {data.categories.flatMap(category => 
          category.subcategories.map(subcat => (
            <button
              key={subcat.id}
              onClick={() => setSelectedSubcategory(subcat)}
              className={selectedSubcategory?.id === subcat.id ? 'active' : ''}
            >
              {subcat.name}
            </button>
          ))
        )}
      </div>

      {/* 渲染选中子类的条目 */}
      <div className="items-list">
        {selectedSubcategory ? (
          selectedSubcategory.items.map(item => (
            <div key={item} className="item-card">
              {item}
            </div>
          ))
        ) : (
          <p>请选择一个子类查看条目</p>
        )}
      </div>
    </div>
  );
}

关键注意点 #

• 尽量给每个子类设置唯一ID（比如id字段），不要只用name，避免同名子类导致的逻辑错误
• 如果JSON是异步加载的，一定要确保在数据加载完成后再执行子类渲染逻辑（比如放在fetch的then回调里，或者用async/await）
• 可以给选中的子类按钮加激活样式，提升用户体验

这样不管你的JSON后续新增多少个子类，代码都能自动适配，不用再手动修改啦！如果你的JSON结构和示例不同，或者用了其他框架，随时补充细节我再帮你调整～

内容的提问来源于stack exchange，提问作者Babe