如何在javascript中创建日期过滤器？

debugcn 发表于 Dev

有趣的小丑

我有 JSON 数据，其结构如下：

data = [
{
    "id": 100,
    "floorplans": [
        {
            "bhk": 1,
            ...some other fields
        },
        {
            "bhk": 3,
            ...some other fields
        },
        {
            "bhk": 2,
            ...some other fields
        }
    ],
    "possession_date": "2016-08-21"
},
{
    "id": 200,
    "floorplans": [
        {
            "bhk": 1.5,
            ...some other fields
        },
        {
            "bhk": 1,
            ...some other fields
        },
        {
            "bhk": 2.5,
            ...some other fields    
        }
    ],
    "possession_date": "2017-08-21"
},
{
    "id": 300,
    "floorplans": [
        {
            "bhk": 1,
            ...some other fields
        },
        {
            "bhk": 4,
            ...some other fields
        },
        {
            "bhk": 2,
            ...some other fields
        }
    ],
    "possession_date": "2018-08-21"
}]

现在上面的数据被存储在 filterOptions 数组中。现在 filterOptions 示例：

filterOptions ["Ready", 2, 4, 1] -> 这意味着过滤所有包含 2,4,1 BHK 的数据，以及拥有日期 <当前日期的数据

filterOptions ["Under construction", 3] -> 这意味着过滤所有包含 3 BHK 的数据，以及包含 3 个 BHK 的数据 > 当前日期

所以我的代码如下：

注意：我使用 .slice() 是因为我在比较 form 的日期YYYY-MM-DD。

function checkStatus(options, date) {
  console.log("Status: ", options)
  const currentTime = moment().format();
  let d1 = Date.parse(currentTime.slice(0,10));
  let d2 = Date.parse(date.slice(0,10));

  if(options.includes("Ready")){
    if(d1 > d2)
      return true;
  } else if(options.includes("Under construction")){
    if(d1 < d2)
      return true;
  }

}

 var display_filtered_projects = data.filter(
        (item) => item.floorplans.some(val => filterOptions.includes(val.bhk))
        && checkStatus(filterOptions, item.possession_date));

    console.log("display_filtered_projects: ", display_filtered_projects);

如果我删除，checkStatus(filterOptions, item.possession_date)则过滤器工作正常，但仅适用于 BHK 类型。现在我必须将它与日期结合起来，我该怎么做？

洛赫马科夫

我建议使用单独的过滤器列表。（基于在 Discord 中与您的讨论）

import moment               from 'moment'
import React                from 'react'
import ReactDOM             from 'react-dom'


const FIELD_DATE = `possession_date`

const yourMegaListFromStackoverflow = [
  {
    "id": 100,
    "floorplans": [
      {
        "bhk": 1,
      },
      {
        "bhk": 3,
      },
      {
        "bhk": 2,
      }
    ],
    "possession_date": "2016-08-21"
  },
  {
    "id": 200,
    "floorplans": [
      {
        "bhk": 1.5,
      },
      {
        "bhk": 1,
      },
      {
        "bhk": 2.5,
      }
    ],
    "possession_date": "2017-08-21"
  },
  {
    "id": 300,
    "floorplans": [
      {
        "bhk": 1,
      },
      {
        "bhk": 4,
      },
      {
        "bhk": 2,
      }
    ],
    "possession_date": "2018-08-21"
  }
]

const statusType = {
  'READY': `READY`,
  'UNDER_CONSTRUCTION': `UNDER_CONSTRUCTION`,
}

const statusMap = {
  [statusType.READY]: `Ready to move`,
  [statusType.UNDER_CONSTRUCTION]: `Under Construction`,
}

const statusList = Object.keys(statusMap)

const FilterStatus = (props) => {
  const {
    activeList = [],
    onClick,
  } = props

  return statusList.map((name) => (
    <div
      key={name}
      style={{ fontWeight: activeList.includes(name) && `bold` }}
      onClick={() => onClick({ name })}
    >
      {statusMap[name]}
    </div>
  ))
}

const typeType = {
  'UNO': `UNO`,
  'DOS': `DOS`,
  'TRES': `TRES`,
  'TRES_PLUS': `TRES_PLUS`,
}

const typeMap = {
  [typeType.UNO]: `1 BHK`,
  [typeType.DOS]: `2 BHK`,
  [typeType.TRES]: `3 BHK`,
  [typeType.TRES_PLUS]: `3+ BHK`,
}

const typeFilterMap = {
  [typeType.UNO]: (value) => value === 1,
  [typeType.DOS]: (value) => value === 2,
  [typeType.TRES]: (value) => value === 3,
  [typeType.TRES_PLUS]: (value) => value >= 3,
}

const typeList = Object.keys(typeMap)

const FilterType = (props) => {
  const {
    activeList = [],
    onClick,
  } = props

  return typeList.map((name) => (
    <div
      key={name}
      style={{ fontWeight: activeList.includes(name) && `bold` }}
      onClick={() => onClick({ name })}
    >
      {typeMap[name]}
    </div>
  ))
}

const App = () => {
  const [filterStatusList, filterStatusListSet] = React.useState([])
  const [filterTypeList, filterTypeListSet] = React.useState([])

  const onFilterStatusClick = React.useCallback(({ name }) => {
    filterStatusList.includes(name)
      ? filterStatusListSet([])
      : filterStatusListSet([name])
  })

  const onFilterTypeClick = React.useCallback(({ name }) => {
    filterTypeList.includes(name)
      ? filterTypeListSet(filterTypeList.filter((value) => value !== name))
      : filterTypeListSet([...filterTypeList, name])
  })

  const list = React.useMemo(
    () => {
      const now = Date.now()
      return yourMegaListFromStackoverflow.filter((doc) => {
        const date = moment(doc[FIELD_DATE]).format(`x`)

        const isStatusOk = filterStatusList.includes(statusType.READY)
          ? now > date
          : filterStatusList.includes(statusType.UNDER_CONSTRUCTION)
            && now < date

        return isStatusOk
          && doc.floorplans.some(
            ({ bhk }) => filterTypeList.some(
              (name) => typeFilterMap[name](bhk)
            )
          )
      })
    },
    [filterStatusList, filterTypeList]
  )

  return <>
    <FilterStatus
      activeList={filterStatusList}
      onClick={onFilterStatusClick}
    />

    <FilterType
      activeList={filterTypeList}
      onClick={onFilterTypeClick}
    />

    {list.map((doc) => (
      <div key={doc.id}>{doc.id}</div>
    ))}
  </>
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。