How to filter user data between 2 date range (timeStamp)?

Question

I have an Array of Object, where Array contains user details, such as Username, age, and timestamp. I want to filter the user from a particular date to a particular date with the help of timestamp

state = {
    result: [
      { userName: 'Rita', age: 19, timeStamp: '1570442597' },
      { userName: 'Rohan', age: 29, timeStamp: '1570442582' },
      { userName: 'Aadi', age: 24, timeStamp: '1569905303' },
      { userName: 'Naveen', age: 26, timeStamp: '1569904463' },
      { userName: 'Richa', age: 20, timeStamp: '1569869577' },
      { userName: 'Reena', age: 30, timeStamp: '1569869487' },
      { userName: 'Dipak', age: 20, timeStamp: '1569866667' },
      { userName: 'Deepa', age: 20, timeStamp: '1569849971' },
      { userName: 'Rohan', age: 29, timeStamp: '1570442582' },
      { userName: 'Aadi', age: 24, timeStamp: '1569905303' },
      { userName: 'Naveen', age: 26, timeStamp: '1529904463' },
      { userName: 'Richa', age: 20, timeStamp: '1569863577' },
      { userName: 'Reena', age: 30, timeStamp: '1562869487' },
      { userName: 'Dipak', age: 20, timeStamp: '1564866667' },
      { userName: 'Deepa', age: 20, timeStamp: '1469849971' },
    ],
  };



{this.state.result.map(user => {
          const date = new Date(user.timeStamp * 1000);
          const dd = date.toDateString();
          return (
            <View
              style={{
                padding: 12,
                margin: 4,
                backgroundColor: '#fff',
                borderRadius: 4,
              }}>
              <Text>{user.userName}</Text>
              <Text>{dd}</Text>
            </View>
          );
        })}

I except the output of (Mon Sep 30, 2019, to Mon Oct 07, 2019)

to be

Rohan Mon Oct 07 2019

Aadi Tue Oct 01 2019

Naveen Tue Oct 01 2019

Richa Tue Oct 01 2019

Reena Tue Oct 01 2019

convert date to timestamp, compare and sort, print. https://stackoverflow.com/questions/9873197/how-to-convert-date-to-timestamp — roottraveller, Oct 16 '19 at 11:37

remix23 · Accepted Answer · 2019-10-16T11:59:10.937

It seems you want to filter the results between the first and and eightth of october (both midnight) inclusive.

We can create timestamps for these dates this way:

const min = Date.parse('2019-10-01');

const max = Date.parse('2019-10-08');

Then the Array.prototype.filter method will come to help:

class App extends React.Component {
  state = {
    result: [
      { userName: 'Rita', age: 19, timeStamp: '1570442597' },
      { userName: 'Rohan', age: 29, timeStamp: '1570442582' },
      { userName: 'Aadi', age: 24, timeStamp: '1569905303' },
      { userName: 'Naveen', age: 26, timeStamp: '1569904463' },
      { userName: 'Richa', age: 20, timeStamp: '1569869577' },
      { userName: 'Reena', age: 30, timeStamp: '1569869487' },
      { userName: 'Dipak', age: 20, timeStamp: '1569866667' },
      { userName: 'Deepa', age: 20, timeStamp: '1569849971' },
      { userName: 'Rohan', age: 29, timeStamp: '1570442582' },
      { userName: 'Aadi', age: 24, timeStamp: '1569905303' },
      { userName: 'Naveen', age: 26, timeStamp: '1529904463' },
      { userName: 'Richa', age: 20, timeStamp: '1569863577' },
      { userName: 'Reena', age: 30, timeStamp: '1562869487' },
      { userName: 'Dipak', age: 20, timeStamp: '1564866667' },
      { userName: 'Deepa', age: 20, timeStamp: '1469849971' },
    ],
  };


  render() {
    
    const min = Date.parse('2019-10-01');

    const max = Date.parse('2019-10-08');

    return this.state.result.filter(
      user => (user.timeStamp * 1000) >= min && (user.timeStamp * 1000) <= max
    ).map(
      user => {
        const date = new Date(user.timeStamp * 1000);
        const dd = date.toDateString();

        return (
          <p
            style={{
              padding: 12,
              margin: 4,
              backgroundColor: '#fff',
              borderRadius: 4,
            }}
          >
            <span>{user.userName}</span>
            &nbsp;
            <span>{dd}</span>
          </p>
        );
      }
    );
  }
}


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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

The data has duplicates but it does not seem to be the point of the question.

score 0 · Answer 2 · answered Oct 16 '19 at 11:40

There is exactly a filter function for arrays.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

So in your case,

const upperLimit = 1469849971; // u can convert a Date into unix time
const lowerLimit = 1469809971;
const filteredUsers = this.state.result.filter(user => lowerLimit <= user.timeStamp && user.timeStamp <= upperLimit);

// TODO your render using filteredUsers

score 0 · Answer 3 · answered Oct 16 '19 at 11:47

0

you can do like this....

const filteredData = this.state.result.filter(data => new Date(data.timestamp) >= new Date("09/30/2019") && new Date(data.timestamp) <= new Date("10/07/2019"))

answered Oct 16 '19 at 11:47

Herat Patel

779
3
10

How to filter user data between 2 date range (timeStamp)?

3 Answers3