how to display array data in in acceding order on date wise in react-native

Question

// I am trying to display array value in acceding order date wise . like "rechargeHistoryDetails"[] it contains 4 value each value has chargeDate ,what I am trying to achieve that,vale with recent date should come first on screen and then next and so on .. I tried sort() function but its not working here . I have to display data in below 4 date format , value with "2017-01-14" should come top on the list and then "2015-11-14" and then next .. Please suggest how I can do taht .

1.2017-01-14
2.2015-11-14
3.2015-02-14
4.2014-08-13

 const {customer,rechargeDeatails} = this.props;

   rechargeHistoryDetails: Array(4)
    0:
    balance: 100
    chargeDate: "2014-08-13T14:16:23.000+01:00"
    serialNumber: 2627423951927890
    __typename: "RechargeHistoryDetails"

    1:
    balance: 5006
    chargeDate: "2015-02-14T22:48:53.000+01:00"
    serialNumber: 1696013838876544
    __typename: "RechargeHistoryDetails"

    2:
    balance: 5002
    chargeDate: "2017-01-14T22:48:53.000+01:00"
    serialNumber: 1696013838876548
    __typename: "RechargeHistoryDetails"


    3:
    balance: 5000
    chargeDate: "2015-11-14T22:48:53.000+01:00"
    serialNumber: 1696013838876550
    __typename: "RechargeHistoryDetails"

          {
              rechargeDeatails.rechargeHistoryDetails.map(
                ({balance,cardType,chargeDate,serialNumber},index)=>{
                return (
                <View style={{marginBottom: 10}} key={index}>
                    <Card>
                    <CardItem header style={{backgroundColor: '#fff', width: '100%', justifyContent: 'space-between', borderBottomColor: '#f1f1f1', borderBottomWidth: 1}}>
                      <View style={{flexDirection:'column',justifyContent: 'space-between'}}>
                        <View>
                          <RegularText text={`₦ ${balance}`} style={{ fontWeight: 'bold' }}/>
                          <SmallText text={`Recharged on ${formatDateTime(chargeDate)}`} textColor="grey"/>
                        </View>
                      </View>

                    </CardItem>
                      <CardItem>
                        <Body>
                          <View style={{flexDirection:'row', width: '100%',justifyContent: 'space-between',}}>
                            <View style={{ flexDirection:'row', flexWrap: 'wrap',alignItems: "flex-start"}}>
                                <View>
                                    <SmallText  text="Serial#" textColor="grey"/>
                                    <Text style={{ fontWeight: 'bold', fontSize:12 }}>{serialNumber}</Text>
                                </View>
                            </View>
                            <View style={{ flexDirection:'row', flexWrap: 'wrap',alignItems: "flex-start"}}>
                              <View>
                                <SmallText  text="Channel" textColor="grey"/>
                                <Text style={{ fontWeight: 'bold', fontSize:12 }}>Voucher</Text>
                              </View>
                            </View>

                          </View>
                        </Body>
                      </CardItem>
                    </Card>
                  </View>
                );
              })
            }

// Thanks

Check this post out https://stackoverflow.com/questions/10123953/sort-javascript-object-array-by-date — Andrew Kachnic, Jun 26 '19 at 11:16
Possible duplicate of [Sort Javascript Object Array By Date](https://stackoverflow.com/questions/10123953/sort-javascript-object-array-by-date) — chrispop, Jun 26 '19 at 11:20
React is using javascript. What you are trying to do is pure javascript, so try looking for the post suggested by @AndrewKachnic — Fakebounce, Jun 26 '19 at 11:20
in that array.sort() function is getting used , but in react native its throwing error.. — Abhigyan Gaurav, Jun 26 '19 at 11:23

score 1 · Accepted Answer · answered Jun 26 '19 at 12:04

1

forget about above thing ,just modify below ,

     import _ from 'lodash';
   _.sortBy(rechargeDeatails.rechargeHistoryDetails, ["chargeDate"]).reverse().map(

answered Jun 26 '19 at 12:04

Abhi

146
12

score 0 · Answer 2 · answered Jun 26 '19 at 11:30

0

what function is the sort in? if it's not in render() then that is your problem

answered Jun 26 '19 at 11:30

Andrew Kachnic

164
1
10

according to your suggestion , rechargeHistoryDetails.sort() i have to use ,rit? so when i am doing that its trowing error – Abhigyan Gaurav Jun 26 '19 at 11:32

AddWeb Solution Pvt Ltd · Answer 3 · 2019-06-26T11:38:16.873

@Abhigyan Gaurav

try like below code

sortdatalist = (data) =>  {
        return data.sort((a, b) => {
            let result = null;
            if (a.userprio != null) {
                var dateA = new Date(a.chargeDate).getTime();
                var dateB = new Date(b.chargeDate).getTime();
            }
            result = dateA < dateB ? 1 : -1;
            return result;
        });
    }




let sortedData = this.sortdatalist(rechargeHistoryDetails)

thanks

how to display array data in in acceding order on date wise in react-native

3 Answers3