Retrieving a date and time value from an object based on a specific range

Question

Retrieving a date and time value from an object based on a specific range

Having trouble displaying all the user IDs and creation dates within a specific date range in a table. I'm struggling with filtering the data based on dates. Can someone help me identify what I might be doing wrong? I've attempted to replicate the API response in the data state, then filter that data to retrieve information from a certain date range. The console statement doesn't seem to work inside the getDateData method in this code sandbox 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>

javascript vue.js vuejs2

Answer 1

Answer №1

To properly iterate over the object (usersFromDb), it is recommended to use .filter or .map instead of forEach on the array.

UPDATE: Below is the corrected and functional code snippet.

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

<script>
export default {
  data() {
    return {
      newData: [], // Must 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' // Example values
      const toDate = '2021-06-14T14:17:13.127Z' // Updated values for comparison
      this.newData = this.usersFromDb.data.users_by_id.users.filter((user) => {
        console.log('user', user) // Improved naming
        return (
          new Date(user.created_at).getTime() >= new Date(fromDate).getTime() &&
          new Date(user.created_at).getTime() <= new Date(toDate).getTime()
        )
      })
    },
  },
}
</script>

Answer 2

To properly iterate over the object (usersFromDb), it is recommended to use .filter or .map instead of forEach on the array.

UPDATE: Below is the corrected and functional code snippet.

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

<script>
export default {
  data() {
    return {
      newData: [], // Must 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' // Example values
      const toDate = '2021-06-14T14:17:13.127Z' // Updated values for comparison
      this.newData = this.usersFromDb.data.users_by_id.users.filter((user) => {
        console.log('user', user) // Improved naming
        return (
          new Date(user.created_at).getTime() >= new Date(fromDate).getTime() &&
          new Date(user.created_at).getTime() <= new Date(toDate).getTime()
        )
      })
    },
  },
}
</script>

Retrieving a date and time value from an object based on a specific range

Answer №1

Similar questions

Having difficulty interpreting JSON Object, converting to a string, or accessing JavaScript property

Build dynamic dropdown menus in Angular.js using cookie data

Change the way a button interacts with a different element

Pattern matching for a string with numerous repetitions using Regular Expressions

Invalid Operation: The value 'undefined' cannot be used as a function

What is the process for choosing every child (regardless of level) of a parent using jQuery?

Update the value of the following element

Populate the Vue.js2 canvas graph with dynamically assigned array values

Using ReactJS: Injecting components and passing variables in extended components without the need for functions

Ways to update the background shade of tr td elements inside a table

Creating a clickable link that dynamically updates based on the span and id values, and opens in a new browser tab

How to turn off and on all elements within a Div tag

Transform the jQuery each method into vanilla JavaScript

What type of response does XHR provide when there is no connection available?

Failure to Reach AngularJS ng-click Function

Chrome will automatically retry an AJAX POST request if it times out after 10 seconds

How can I modify a dynamically generated table to include rowspan and colspan attributes in the rows?

Using Promise.all within the useEffect hook in ReactJS

Exploring the process of incorporating types for a Vue plugin

Encountering a 404 error with Next.js 13 dynamic routing