如何过滤多维JSON文件以匹配输入值并去除重复的key4值

我看你现在的核心问题是要匹配嵌套在key3数组里的key4值，还要去除重复项，原来的代码报错是因为直接访问state.key3.key4——key3是数组不是单个对象，没法直接拿到key4属性，咱们来一步步修正：

关键问题分析 #

1. 嵌套数组的遍历问题：每个顶层对象的key3是数组，必须遍历数组内的每个子对象，才能检查key4是否匹配搜索文本。
2. 去重需求：收集到所有匹配的key4值后，需要剔除重复项，最简便的方式是利用ES6的Set（它会自动忽略重复值）。

修正后的完整代码 #

var object = [{"key1" : "Test value 1", "key3" : [{ "key4" : "Test value 3", "key5" : "Test value 4" }, { "key4" : "Test value 5", "key5" : "Test value 6" }] }, { "key1" : "Test value 11", "key3" : [{ "key4" : "Test value 13", "key5" : "Test value 14" }, { "key4" : "Test value 15", "key5" : "Test value 16" }] }];
const search = document.getElementById("search");
const matchList = document.getElementById("match-list");

const searchStates = (searchText) => {
  // 空输入时清空结果
  if (!searchText) {
    matchList.innerHTML = '';
    return;
  }

  const regex = new RegExp(`^${searchText}`, 'gi');
  let allMatchedKeys = [];

  // 遍历所有顶层对象，收集匹配的key4值
  object.forEach(state => {
    // 筛选当前对象key3中key4匹配的项，提取key4的值
    const matchedItems = state.key3
      .filter(item => item.key4.match(regex))
      .map(item => item.key4);
    // 合并到总列表
    allMatchedKeys = [...allMatchedKeys, ...matchedItems];
  });

  // 用Set去重，再转回数组
  const uniqueMatches = [...new Set(allMatchedKeys)];

  // 渲染去重后的结果到页面（可根据需求调整渲染样式）
  matchList.innerHTML = uniqueMatches
    .map(match => `<div class="p-2 border-bottom">${match}</div>`)
    .join('');

  console.log('去重后的匹配结果:', uniqueMatches);
};

search.addEventListener("input", () => searchStates(search.value));

代码解释 #

• 遍历嵌套数组：用forEach处理每个顶层对象，再通过filter筛选key3数组中符合正则的子对象，map提取出key4的值。
• 去重逻辑：new Set(allMatchedKeys)会自动剔除重复的字符串，再用[...Set]把Set转回数组，得到唯一的匹配值列表。
• 空输入处理：添加了空输入时清空结果的逻辑，避免不必要的计算和显示。
• 页面渲染：把去重后的结果生成DOM元素，替换matchList的内容，你可以根据自己的需求修改渲染的HTML结构和样式。

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