TutorialMeta
Ad

How To Display Array Data In In Acceding Order On Date Wise In React-native

- 1 answer

// 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

Ad

Answer

forget about above thing ,just modify below ,

     import _ from 'lodash';
   _.sortBy(rechargeDeatails.rechargeHistoryDetails, ["chargeDate"]).reverse().map(
Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad