迭代过滤嵌套JSON数组按serial_number查询返回空值问题排查

• 逻辑判断错误：Array.filter() 永远返回数组，空数组在布尔判断中属于真值，因此只要grievance数组中没有匹配项，代码也不会进入else分支查询general数组，自然找不到位于general下的0018条目。
• 嵌套map返回结构错误：map方法是一对一映射，多层嵌套使用map会最终返回多层嵌套的数组结构，即使匹配到结果也会被包裹在多层空数组中，不符合预期的单条对象输出。

核心思路是先把所有嵌套的人员条目展平，再统一筛选，避免多层分支判断遗漏匹配项：

const query = { serial_number: "0018" };

const filterData = dummyData
  // 展平所有行政区下的网格数组
  .flatMap(district => district.ward_no)
  // 合并每个网格下的诉求类、普通类人员条目，统一展平
  .flatMap(ward => [...ward.grievance, ...ward.general])
  // 筛选匹配编号的条目，找单个结果用find，多结果匹配可替换为filter
  .find(item => item.serial_number === query.serial_number);

console.log(filterData); // 输出预期结果：{"serial_number":"0018","name":"Bruno Fernandes"}

可以使用map方法迭代筛选结果渲染到页面，示例如下（假设页面存在id为result-container的挂载容器）：

// 单条结果包装为数组统一处理，多匹配结果可直接使用filter返回的数组
const resultList = [filterData];
// 迭代生成DOM字符串
const renderHtml = resultList.map(item => `
  <div class="info-card">
    <p>序列编号：${item.serial_number}</p>
    <p>人员姓名：${item.name}</p>
  </div>
`).join('');
// 插入到页面中
document.getElementById('result-container').innerHTML = renderHtml;

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