首页 > 解决方案 > 如何使用映射过滤嵌套数组并使用对象过滤

问题描述

我想返回 json 数据比较日期过滤值。我正在使用 Array.Filter 和 Map 我尝试了下面的代码它不起作用你能解释一下如何使用过滤器 Map 获取返回 json 比较特定日期

可用性对象代码中的数组与日期比较我没有得到返回值

我想比较日期过滤器值

我在我的代码下面添加了..

let cruiseFilterData = [{
      "name":"text--1",
      "availabilities":{
         "2019":{
            "year":"2019",
            "items":[
               {
                  "discount":{
                     "name":"one"
                    },
                  "dateDepart":"12\/10\/2019"
                },
               {
                  "discount":{
                     "name":"Two"
                  },
                  "dateDepart":"15\/12\/2019"
                }
            ]
         }
      },
      "sort":0,
      "featured":true
   },
   {
      "name":"text--2",
      "availabilities":{
         "2019":{
            "year":"2019",
            "items":[
               {
                  "discount":{
                     "name":"one"
                    },
                  "dateDepart":"18\/05\/2019"
                },
               {
                  "discount":{
                     "name":"two"
                  },
                  "dateDepart":"12\/10\/2019"
               }
            ]
         }
      },
      "sort":1,
      "featured":true
   },
   {
      "name":"text--3",
      "availabilities":{
         "2019":{
            "year":"2019",
            "items":[
               {
                  "discount":{
                     "name":"one"
                  },
                  "dateDepart":"25\/05\/2019"
                },
               {
                  "discount":{
                     "name":"two"
                  },
                  "dateDepart":"12\/10\/2019"
               }
            ]
         }
      },
      "sort":2,
       "featured":true
   },
    {
      "name":"text--4",
      "availabilities":null,
      "sort":2,
       "featured":true
   }
]

let compareDate = 'Sat Oct 12 2019 00:00:00 GMT+0400 (Mauritius Standard Time)';

const linkedItinery = cruiseFilterData.map((element) => {
    element.availabilities = Object.keys(element.availabilities).filter((value, index) => {
        element.availabilities[value].items.filter((value, index) => {
            const dateValue = value.dateDepart;
            if (dateValue.indexOf('/') >= 0) {
                const dateSpilt = dateValue.split(' ')[0];
                const parts = dateSpilt.split('/');
                if (parts) {
                    const dateMerge = '' + parts[1] + '/' + parts[0] + '/' + parts[2];
                    propDate = new Date(dateMerge);
                } else {
                    propDate = new Date(dateValue);
                }
            }
            if(propDate.toDateString() === compareDate.toDateString()) {
                return value;
            }
        });
        return value;
    });
    return element;
});

console.log(linkedItinery);

标签: javascriptangulartypescript

解决方案


如果您的目标是根据用户日期选择(在此处由您的变量表示)过滤可用的巡航基地列表,我不能 100% 肯定了解您到目前为止尝试实现的目标compareDate。您可以更新您的代码,如下所示:

    let cruiseFilterData = [{
          "name":"text--1",
          "availabilities":{
             "2019":{
                "year":"2019",
                "items":[
                   {
                      "discount":{
                         "name":"one"
                        },
                      "dateDepart":"12/10/2019"
                    },
                   {
                      "discount":{
                         "name":"Two"
                      },
                      "dateDepart":"15/12/2019"
                    }
                ]
             }
          },
          "sort":0,
          "featured":true
       },
       {
          "name":"text--2",
          "availabilities":{
             "2019":{
                "year":"2019",
                "items":[
                   {
                      "discount":{
                         "name":"one"
                        },
                      "dateDepart":"18/05/2019"
                    },
                   {
                      "discount":{
                         "name":"two"
                      },
                      "dateDepart":"12/10/2019"
                   }
                ]
             }
          },
          "sort":1,
          "featured":true
       },
       {
          "name":"text--3",
          "availabilities":{
             "2019":{
                "year":"2019",
                "items":[
                   {
                      "discount":{
                         "name":"one"
                      },
                      "dateDepart":"25/05/2019"
                    },
                   {
                      "discount":{
                         "name":"two"
                      },
                      "dateDepart":"12/10/2019"
                   }
                ]
             }
          },
          "sort":2,
           "featured":true
       },
        {
          "name":"text--4",
          "availabilities":null,
          "sort":2,
           "featured":true
       }
    ]
    
    let compareDate = new Date(2019, 12, 15); // Year, month, day.
    
    let linkedItinery = cruiseFilterData.filter((cruise) => {
        // Exclude all cruise without any availabilities
        if(!cruise.availabilities) return false;
        // check if current cruise have at least one availability for selected date.
        return Object.values(cruise.availabilities).findIndex(availability => {
           return availability.items.findIndex((item) => {
              // First we split the date by /.
              const [day, month, year] = item.dateDepart.split('/');
              // We craft date.
              const dateValue = new Date(year, month, day);
              // We compare both date to check if is the same.
              return dateValue.getTime() === compareDate.getTime();
           }) !== -1;
        }) !== -1; // -1 means not found. Is intersting to use findIndex here because he will stop the loop as soon as he find the first element which match with your callback critera. That avoid overlooping.
    });
    
    console.log(linkedItinery);

首先,我改变了你compareDate但纯粹的Date对象。

然后我按嵌套标准过滤原始列表。我的目标是找到具有可用性的 Cruiser,并在此可用性中检查是否至少有一个日期与用户输入匹配。


如果不是您所期望的,请告诉我,我将根据您的说明更新我的代码。


推荐阅读