Angular中如何根据嵌套值过滤键值对数据？

嘿，作为Angular新手碰到这种嵌套的键值对数据确实容易无从下手，别担心，我来带你一步步实现你需要的过滤逻辑！

思路分析 #

你的需求是从嵌套的旅程数据中，筛选出所有包含place[value]='Vienna'的旅程条目，同时保留原有的日期分组结构，并且去掉没有符合条件条目的日期键（比如示例中的20180301）。核心步骤是：

• 遍历外层的所有日期键
• 对每个日期下的旅程数组进行过滤，只保留包含Vienna的旅程
• 仅将过滤后不为空的日期分组保留到结果中

代码实现 #

我们可以用TypeScript来编写这个过滤函数，完全适配Angular项目：

// 原始旅程数据
const journey = {
  "20180201": [{
          "journeyId": 1001,
          "Number": "001",
          "DriverName":"Alex",
          "Transporter": {
              "id": "T1",
              "number": "AN01001",
              "Company": "Tranzient"
          },
          "place": [{"id":001,"value":"Washington DC" },
                    {"id":002,"value":"Canberra"}]
      },
      {
         "journeyId": 1002,
          "Number": "001",
          "DriverName":"Tom",
          "Transporter": {
              "id": "T2",
              "number": "AN01002",
              "Company": "Trax"
          },
          "place": [{"id":002,"value":"Canberra" },
                    {"id":004,"value":"Vienna"}]
      },
      {
           "journeyId": 1003,
          "Number": "004",
          "DriverName":"Jack",
          "Transporter": {
              "id": "T3",
              "number": "AN01003",
              "Company": "Trax"
          },
          "place": [{"id":001,"value":"Washington DC" },
                    {"id":004,"value":"Vienna"}]
      }],
  "20180211": [{
           "journeyId": 1004,
          "Number": "005",
          "DriverName":"Jack",
          "Transporter": {
              "id": "T3",
              "number": "AN01013",
              "Company": "Trax"
          },
          "place": [{"id":005,"value":"Bridgetown" },
                    {"id":006,"value":"Ottawa"},
                    {"id":004,"value":"Vienna"}]

      },
      {
         "journeyId": 1005,
          "Number": "005",
          "DriverName":"Jerry",
          "Transporter": {
              "id": "T3",
              "number": "AN01020",
              "Company": "Trax"
          },
          "place": [{"id":005,"value":"Bridgetown" },
                    {"id":006,"value":"Ottawa"}]
      }],
  "20180301": [{
          "journeyId": 1006,
          "Number": "005",
          "DriverName":"demy",
          "Transporter": {
              "id": "T3",
              "number": "AN01003",
              "Company": "Trax"
          },
          "place": [{"id":005,"value":"Bridgetown" },
                    {"id":006,"value":"Ottawa"}]
      }]
};

// 过滤函数
function filterJourneysByTargetPlace(journeyData: any, targetPlace: string) {
  const filteredJourney: any = {};
  
  // 遍历所有日期键
  Object.keys(journeyData).forEach(dateKey => {
    // 过滤当前日期下的旅程，只保留包含目标地点的条目
    const filteredTrips = journeyData[dateKey].filter((trip: any) => {
      // 检查trip的place数组中是否有value等于目标地点的元素
      return trip.place.some((place: any) => place.value === targetPlace);
    });
    
    // 如果过滤后有结果，才添加到最终对象中
    if (filteredTrips.length > 0) {
      filteredJourney[dateKey] = filteredTrips;
    }
  });
  
  return filteredJourney;
}

// 调用函数，过滤出包含Vienna的旅程
const filteredResult = filterJourneysByTargetPlace(journey, 'Vienna');
console.log(filteredResult);

代码解释 #

• Object.keys(journeyData)：获取外层所有的日期字符串键，比如"20180201"、"20180211"
• journeyData[dateKey].filter(...)：对每个日期下的旅程数组进行过滤，只保留符合条件的旅程
• trip.place.some(...)：检查当前旅程的place数组中，是否存在至少一个元素的value等于'Vienna'，some方法只要找到一个符合条件的元素就会返回true
• 最后只把过滤后不为空的日期分组添加到结果对象，避免保留空数组的日期键

运行这段代码后，你得到的结果就和你期望的完全一致啦！

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