如何在JavaScript中遍历含可变键名的嵌套JSON并筛选mobile分类

先假设你的接口返回的JSON结构类似下面这种（如果实际结构不一样，对应调整层级即可）：

{
  "data": [
    { "id": 1, "category": "mobile", "name": "小米14" },
    { "id": 2, "category": "laptop", "name": "MacBook Pro" },
    { "id": 3, "category": "mobile", "name": "iPhone 15" }
  ]
}

基础实现步骤 #

1. 先把Fetch返回的响应解析成JSON，再用filter方法筛选目标分类：

fetch('你的接口地址')
  .then(res => {
    // 先判断请求是否成功
    if (!res.ok) throw new Error(`请求错误：${res.status}`);
    return res.json(); // 解析为JSON对象
  })
  .then(rawData => {
    // 从嵌套结构里取出数组，筛选category为mobile的项
    const mobileOnlyData = rawData.data.filter(item => item.category === 'mobile');
    console.log('筛选后的移动端数据：', mobileOnlyData);
    // 这里可以继续处理筛选后的数据，比如渲染到页面
  })
  .catch(err => console.error('处理出错：', err));

复杂嵌套结构的处理 #

如果你的数据嵌套得更深（比如rawData.result.goodsList这种层级），就调整filter的调用层级：

// 假设结构是 { result: { goodsList: [/* 商品项 */] } }
.then(rawData => {
  const mobileItems = rawData.result.goodsList.filter(item => item.category === 'mobile');
  console.log(mobileItems);
})

避坑提示 #

• 严格匹配category的拼写和大小写，比如别把mobile写成Mobile，否则筛选不到
• 如果部分数据可能没有category字段，用可选链操作符?.避免报错：

const mobileItems = rawData.data.filter(item => item?.category === 'mobile');

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