Ad

How To Filter User Data Between 2 Date Range (timeStamp)?

- 1 answer

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

Ad

Answer

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.

Ad
source: stackoverflow.com
Ad