按月过滤计划列表答案

【问题标题】：Filter plan list by month按月过滤计划列表
【发布时间】：2020-05-11 00:15:30
【问题描述】：

我想按月列出计划，但我的代码不起作用。我想设置一个标题，例如九月，然后列出该月的所有计划。

我的数据：

const plans =  [
    {
        "done": true,
        "datetime": "2020-01-22T01:00:00+00:00",

    },
    {
        "done": true,
        "datetime": "2020-01-25T03:00:00+00:00",
        "name": "Read a book",
    },
    {
        "done": false,
        "datetime": "2020-01-29T01:00:00+00:00",
        "name": "Travel",

    },
    {
        "done": false,
        "datetime": "2020-02-02T02:00:00+00:00",
        "name": "Vaccations",
    },
    {
      "done": false,
      "datetime": "2020-03-02T01:00:00+00:00",
      "name": "No plans",
  },
  {
    "done": false,
    "datetime": "2020-04-02T01:00:00+00:00",
    "name": "Do excersice",
  },
  {
    "done": false,
    "datetime": "2020-05-04T01:00:00+00:00",
    "name": "Work",
  },
  {
    "done": false,
    "datetime": "2020-05-04T01:00:00+00:00",
    "name": "Watch netflix",
  },
  {
    "done": false,
    "datetime": "2020-05-04T01:00:00+00:00",
    "name": "No plans",
  }
]

这是在我的 App.js (React) 中：

return (
    <div className="App">
      {
      plans.map((todo, idx) => {
        const currentMonth = moment(todo.datetime).format('MM')
        const anotherMonth = plans[idx + 1] ? plans[idx + 1].datetime : undefined
        const anotherMonthConverted = moment(anotherMonth).format('MM') 

        console.log(anotherMonthConverted)
        return(
          <div key={idx}>
            <div>
            {
              currentMonth <= anotherMonth ? (
                <div>                 
                  <div>{moment(currentMonth).format('MMM')}</div>
                </div>
              ):(
                <div>
                </div>
              )
            }
            <div >{todo.name}</div>
            </div>
          </div>
        )
      })
      }
    </div>
  );
}

image output example

【问题讨论】：

标签： javascript arrays json reactjs filter

【解决方案1】：

我建议将您的计划分组，以便更容易以干净的方式呈现它们。

const groupedPlans = plans.reduce((acc, val) => {
  const valMonth = moment(val.datetime).format('MMM');
  const planGroup = acc.find(plan => plan.month === valMonth);

  if (!planGroup) {
    acc.push({ month: valMonth, plans: [val] })
  } else {
    planGroup.plans = [...planGroup.plans, val];
  }

  return acc;
}, [])

这将使您的数据看起来像这样。

[
  {
    month: 'Jan',
    plans: [
      {
        done: true,
        datetime: '2020-01-22T01:00:00+00:00'
      },
      {
        done: true,
        datetime: '2020-01-25T03:00:00+00:00',
        name: 'Read a book'
      },
      {
        done: false,
        datetime: '2020-01-29T01:00:00+00:00',
        name: 'Travel'
      }
    ]
  },
  {
    month: 'Feb',
    plans: [
      {
        done: false,
        datetime: '2020-02-02T02:00:00+00:00',
        name: 'Vaccations'
      }
    ]
  },
  {
    month: 'Mar',
    plans: [
      {
        done: false,
        datetime: '2020-03-02T01:00:00+00:00',
        name: 'No plans'
      }
    ]
  },
  {
    month: 'Apr',
    plans: [
      {
        done: false,
        datetime: '2020-04-02T01:00:00+00:00',
        name: 'Do excersice'
      }
    ]
  },
  {
    month: 'May',
    plans: [
      {
        done: false,
        datetime: '2020-05-04T01:00:00+00:00',
        name: 'Work'
      },
      {
        done: false,
        datetime: '2020-05-04T01:00:00+00:00',
        name: 'Watch netflix'
      },
      {
        done: false,
        datetime: '2020-05-04T01:00:00+00:00',
        name: 'No plans'
      }
    ]
  }
]

你可以像这样渲染它，或者你喜欢的任何方式。

return (
    <div className="App">
      {
      groupedPlans.map((todo, idx) => {
        return(
          <div key={idx}>
            <div>
                <div>                 
                  <div>{todo.month}</div>
                </div>
                {todo.plans.map(plan => <div>{plan.name}</div>)}
            </div>
          </div>
        )
      })
      }
    </div>
  );
}

【讨论】：

非常感谢它的工作，但把 {todo.plans.map(plan =>
{plan.name}
)} insted {todo.plans(plan => {plan.name}
)}

【解决方案2】：

您可以为此使用时刻，它适用于日期。所以你可以这样对你的数组进行排序：

const App = () => {
  const plans =  [
    {
        "done": false,
        "datetime": "2020-05-04T01:00:00+00:00", // May as first item
        "name": "Watch netflix",
    },
    {
        "done": true,
        "datetime": "2020-01-22T01:00:00+00:00",

    },
    {
        "done": true,
        "datetime": "2020-01-25T03:00:00+00:00",
        "name": "Read a book",
    },
    {
        "done": false,
        "datetime": "2020-01-29T01:00:00+00:00",
        "name": "Travel",

    },
    {
        "done": false,
        "datetime": "2020-02-02T02:00:00+00:00",
        "name": "Vaccations",
    },
    {
      "done": false,
      "datetime": "2020-03-02T01:00:00+00:00",
      "name": "No plans",
  },
  {
    "done": false,
    "datetime": "2020-05-04T01:00:00+00:00",
    "name": "No plans",
  },
  {
    "done": false,
    "datetime": "2020-04-02T01:00:00+00:00",
    "name": "Do excersice",
  },
  {
    "done": false,
    "datetime": "2020-05-04T01:00:00+00:00",
    "name": "Work",
  },

];
const orderedPlans = () => {
  return plans.sort((a, b) => {
    return moment(a.datetime) > moment(b.datetime)? 1 : -1; // handle the 0 case if you need, not done here
  });
}
  return <div>{orderedPlans().map(plan => <div>{plan.datetime}</div>)}</div>
}

render(<App />, document.getElementById('root'));

这是repro on stackblitz

【讨论】：