Returning datetime value from an object depending of a range

Question

I've been trying to display all the users's id and created_at from a specific date range on a table. However, I've been facing problem on filtering the data by the dates. Can anyone point out what I'm doing wrong? I tried to imitate the api response in the data state and filtering on that data and getting the new data from a specific date range. The console statement is not working inside the getDateData method in the codesandbox demo

<template>
  <div @click="getDateData">Hello</div>
</template>

<script>
export default {
  data() {
    return {
      newData: {},
      usersFromDb: {
        data: {
          users_by_id: {
            users: [
              {
                id: "123",
                created_at: "2021-04-14T12:24:27.577Z",
              },
              {
                id: "456",
                created_at: "2021-04-14T12:24:27.577Z",
              },
            ],
          },
        },
      },
    };
  },
  methods: {
    getDateData() {
      const fromDate = "2021-04-14T12:24:27.577Z";
      const toDate = "2021-04-14T14:17:13.127Z";
      this.newData = this.usersFromDb.forEach((item) => {
        console.log(item.users_by_id.users.created_at);
        return (
          item.date.getTime() >= fromDate.getTime() &&
          item.date.getTime() <= toDate.getTime()
        );
      });
    },
  },
};
</script>

Answer 1

You cannot loop on an object (usersFromDb) with a forEach and in this case, you should prefer a .filter (or a .map) to loop on the given array.

---

EDIT: alright, here is the whole fixed and working code.

<template>
  <div>
    <button @click="getDateData">get the data</button>
    <div v-for="date in newData" :key="date.id">{{ date.id }}</div> <!-- clean display of all the ids of the data -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      newData: [], // ! needs to be an array
      usersFromDb: {
        data: {
          users_by_id: {
            users: [
              {
                id: '123',
                created_at: '2021-04-14T12:24:27.577Z',
              },
              {
                id: '456',
                created_at: '2021-04-14T12:24:27.577Z',
              },
            ],
          },
        },
      },
    }
  },

  methods: {
    getDateData() {
      const fromDate = '2021-02-14T12:24:27.577Z' // I modified those for example purposes
      const toDate = '2021-06-14T14:17:13.127Z' // same, otherwise it's pretty useless to make a comparison if they are equal
      this.newData = this.usersFromDb.data.users_by_id.users.filter((user) => {
        console.log('user', user) // better namming
        return (
          new Date(user.created_at).getTime() >= new Date(fromDate).getTime() &&
          new Date(user.created_at).getTime() <= new Date(toDate).getTime()
        )
      })
    },
  },
}
</script>