如何在二级嵌套JSON数组中搜索值，返回两层均符合匹配条件的结果

架构老林

2026-10-2

实现代码修改

1. 初始化原始数据备份

先保留完整的原始数据，避免过滤操作丢失源数据：

// 原始完整数据备份，不要修改这个变量
orgList = [
  {
    id: 'abc',
    data: [
      { key: '1', value: 'car' },
      { key: '2', value: 'bus' },
      { key: '3', value: 'bike' },
      { key: '4', value: 'truck' },
      { key: '5', value: 'jeep' },
    ],
  },
  {
    id: 'def',
    data: [
      { key: '1', value: 'car' },
      { key: '2', value: 'bicycle' },
      { key: '3', value: 'train' },
      { key: '4', value: 'aeroplane' },
      { key: '5', value: 'jeep' },
    ],
  },
];
// 页面渲染绑定的数组，初始值为完整原始数据
list = JSON.parse(JSON.stringify(this.orgList));

2. 改写搜索处理方法

遍历所有外层对象，分别过滤内层数组，再剔除无匹配结果的外层项：

handleSearch = (event) => {
  const searchVal = event.target.value.trim().toLowerCase();
  if (searchVal) {
    this.list = this.orgList
      // 遍历所有外层对象，过滤对应内层data数组
      .map(outer => ({
        ...outer,
        data: outer.data.filter(inner => inner.value.toLowerCase().includes(searchVal))
      }))
      // 剔除内层无匹配结果的外层对象
      .filter(outer => outer.data.length);
  } else {
    // 搜索为空时恢复全量数据
    this.list = JSON.parse(JSON.stringify(this.orgList));
  }
};