How to update items in array for inverted flatlist - react-native

Question

Here is my code:
response.data.data.map((item, index) => {
console.log('response',item);
const itemIndex = dataList.findIndex(v => v.dt3 === item.dt3);
if (itemIndex > -1) {
//update quantity in list if same item is selected more than one time
const value = {
ds: item.ds,
bl: item.bl,
mty: item.od_auto.Mty,
name: item.customer_name_auto,
};
dataList.push(value);
} else {
const value = {
ds: item.ds,
bl: item.bl,
mty: item.od_auto.Mty,
name: item.customer_name_auto,
};
dataList.push(item.dt3);
for(let i = 0; i<dataList.length; i++){
dataList[i] = value;
}
}
});
Expected output:
const DATA = [
{
title: '4th April, 2020',
data: [
{
ds: item.ds,
bl: item.bl,
mty: item.od_auto.Mty,
name: item.customer_name_auto,
},{
ds: item.ds,
bl: item.bl,
mty: item.od_auto.Mty,
name: item.customer_name_auto,
}
],
},
{
title: '3rd April, 2020',
data: [
{
ds: item.ds,
bl: item.bl,
mty: item.od_auto.Mty,
name: item.customer_name_auto,
},{
ds: item.ds,
bl: item.bl,
mty: item.od_auto.Mty,
name: item.customer_name_auto,
}
],
},
{
title: '2nd April, 2020',
data: [
{
ds: item.ds,
bl: item.bl,
mty: item.od_auto.Mty,
name: item.customer_name_auto,
},{
ds: item.ds,
bl: item.bl,
mty: item.od_auto.Mty,
name: item.customer_name_auto,
}
],
},
{
title: '1st April, 2020',
data: [
{
ds: item.ds,
bl: item.bl,
mty: item.od_auto.Mty,
name: item.customer_name_auto,
},{
ds: item.ds,
bl: item.bl,
mty: item.od_auto.Mty,
name: item.customer_name_auto,
}
],
},
];
This is how my API response looks:
{
"status": 1,
"data": [
{
"aid": 188427,
"s": 1,
"dt": "19th Oct 2022",
"dt3": "19-10-2022",
"ds": "Proceeds",
"cr": 172,
"bk": "sdlsjkfhjdfhgf",
"bkid": 1,
"up": "",
"od": {
"Mty": "",
"Mre": "",
"Mct": "",
"Mci": "",
"Mdt": "",
"Mdi": ""
},
"typ": "",
"cnm": "",
"tm": "19th Oct 2022 19:31",
"bl": "224",
"od_auto": {
"Mty": "Services",
"Mci": 77,
"Mct": 2,
"Mre": "",
"Mdt": "",
"Mdi": ""
},
"customer_name_auto": null
},
{
"aid": 188426,
"s": 2,
"dt": "19th Oct 2022",
"dt3": "19-10-2022",
"ds": "cslkdjfhsjkdfhjshfjs",
"cr": 1.01,
"bk": "slkdjfhsjkdfhljdfh",
"bkid": 397,
"up": "",
"od": {
"Mty": "",
"Mre": "",
"Mct": "",
"Mci": "",
"Mdt": "",
"Mdi": ""
},
"typ": "",
"cnm": "",
"tm": "19th Oct 2022 18:07",
"bl": "2487.22",
"od_auto": {
"Mty": "djfdfhghgh",
"Mci": 181,
"Mct": 1,
"Mre": "",
"Mdt": "",
"Mdi": ""
},
"customer_name_auto": "skdhfshdghsd"
},
]}
I am fetching the response from API to create Inverted flatlist. In my response array I have date object for each item in the array. Now I want to group the items which has same date in an array. How can I arrange the array items?

Answer 1

if you want to group your array of objects based on the date attribute then you can use this function
const data_array = {
"status": 1,
"data": [
{
"aid": 188427,
"s": 1,
"dt": "19th Oct 2022",
"dt3": "19-10-2022",
"ds": "Proceeds",
"cr": 172,
"bk": "sdlsjkfhjdfhgf",
"bkid": 1,
"up": "",
"od": {
"Mty": "",
"Mre": "",
"Mct": "",
"Mci": "",
"Mdt": "",
"Mdi": ""
},
"typ": "",
"cnm": "",
"tm": "19th Oct 2022 19:31",
"bl": "224",
"od_auto": {
"Mty": "Services",
"Mci": 77,
"Mct": 2,
"Mre": "",
"Mdt": "",
"Mdi": ""
},
"customer_name_auto": null
},
{
"aid": 188426,
"s": 2,
"dt": "19th Oct 2022",
"dt3": "19-10-2022",
"ds": "cslkdjfhsjkdfhjshfjs",
"cr": 1.01,
"bk": "slkdjfhsjkdfhljdfh",
"bkid": 397,
"up": "",
"od": {
"Mty": "",
"Mre": "",
"Mct": "",
"Mci": "",
"Mdt": "",
"Mdi": ""
},
"typ": "",
"cnm": "",
"tm": "19th Oct 2022 18:07",
"bl": "2487.22",
"od_auto": {
"Mty": "djfdfhghgh",
"Mci": 181,
"Mct": 1,
"Mre": "",
"Mdt": "",
"Mdi": ""
},
"customer_name_auto": "skdhfshdghsd"
},
]}
var groupBy = function(xs, key) {
return xs.reduce(function(rv, x) {
(rv[x[key]] = rv[x[key]] || []).push(x);
return rv;
}, {});
};
console.log(groupBy(data_array.data, 'dt3'));
You can group your array with any object attribute:
let data_group_by_date = groupBy(data_array.data, 'dt3')
You can u section list data with the this code:
const sections_list_data = [];
Object.keys(data_group_by_date).map((item, i) => {
sections.push({
title: item,
data: data_group_by_date[item],
});
});

Answer 2

Add this Modules> Modify it a little bit.
import React, {useCallback, useEffect, useState} from 'react';
import {
ActivityIndicator,
SectionList,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import Modal from 'react-native-modal';
import {RFValue} from 'react-native-responsive-fontsize';
import Entypo from 'react-native-vector-icons/Entypo';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import {hp, wp} from '../constants/scaling';
import {colors, fonts} from '../constants/theme';
import {titleCase} from '../functions/commonfunction';
import {textStyles} from '../styles/textStyles';
const Item = ({item}) => {
return (
<View
style={{
width: wp(90),
height: hp(6),
alignItems: 'center',
flexDirection: 'row',
borderBottomColor: colors.inputBgColor,
borderBottomWidth: 1,
}}>
<FontAwesome
name={'map-marker'}
style={{marginRight: wp(2)}}
color={'#a1aac4'}
size={wp(6)}
/>
<Text
numberOfLines={1}
style={{
...textStyles.Label,
textAlign: 'center',
fontFamily: fonts.Medium,
}}>
{item.name}
</Text>
</View>
);
};
const SectionListDropDown = ({
isModalVisible,
setIsModalVisible,
setSelectedValue,
}) => {
const [loading, setLoading] = useState(false);
const [suggestionsList, setSuggestionsList] = useState([]);
const [search, setSearch] = useState('');
useEffect(() => {
if (search.trim().length > 2) {
ur_api_call_here_and_other_logic (search);
}
}, [search]);
const ur_api_call_here_and_other_logic = () => {
}
return (
<Modal
style={{
justifyContent: 'flex-end',
margin: 0,
}}
useNativeDriver={true}
backdropColor={colors.primaryColor}
backdropOpacity={1}
hideModalContentWhileAnimating={true}
backdropTransitionOutTiming={0}
animationInTiming={500}
animationOutTiming={500}
isVisible={isModalVisible}
onBackdropPress={setIsModalVisible}>
<View style={styles.main_view}>
<View
style={{
width: wp(90),
flexDirection: 'row',
alignItems: 'center',
//backgroundColor: colors.inputBgColor,
height: hp(7),
marginBottom: wp(2),
}}>
<TouchableOpacity onPress={setIsModalVisible}>
<Entypo name="cross" size={wp(7)} color={colors.textPrimaryColor} />
</TouchableOpacity>
<Text
style={{
...textStyles.heading,
marginLeft: wp(4),
fontFamily: fonts.Bold,
}}>
Departure
</Text>
</View>
<SectionList
showsVerticalScrollIndicator={false}
sections={suggestionsList}
ListEmptyComponent={
<Text
style={{
...textStyles.Label,
textAlign: 'center',
fontFamily: fonts.Bold,
}}>
Please Enter a least three characters
</Text>
}
scrollEventThrottle={500}
ListHeaderComponent={
<TouchableOpacity
style={{
backgroundColor: colors.inputBgColor,
height: hp(7),
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: wp(5),
borderRadius: wp(2),
marginBottom: wp(2),
width: wp(90),
}}>
<FontAwesome
name={'circle-o'}
style={{marginRight: wp(2)}}
color={'#a1aac4'}
size={wp(6)}
/>
<TextInput
value={search}
onChangeText={text => setSearch(text)}
placeholderTextColor={colors.secondaryTextColor}
placeholder="Search here your destination"
style={{
width: wp(72),
fontFamily: fonts.Medium,
includeFontPadding: false,
borderRadius: wp(2),
paddingHorizontal: wp(2),
backgroundColor: colors.inputBgColor,
justifyContent: 'center',
color: colors.textPrimaryColor,
fontSize: RFValue(14),
alignItems: 'center',
alignSelf: 'center',
height: hp(7),
}}
/>
</TouchableOpacity>
}
keyExtractor={(item, index) => item + index}
renderItem={({item}) => <Item item={item} />}
renderSectionHeader={({section: {title}}) => (
<View
style={{
backgroundColor: colors.primaryColor,
width: wp(90),
height: hp(7),
flexDirection: 'row',
marginVertical: wp(2),
borderRadius: wp(1),
alignItems: 'center',
paddingHorizontal: wp(2),
}}>
{title == 'hotels' ? (
<FontAwesome
name={'hotel'}
style={{marginRight: wp(2)}}
color={'#fff'}
size={wp(6)}
/>
) : (
<FontAwesome
name={'circle-o'}
style={{marginRight: wp(2)}}
color={'#fff'}
size={wp(6)}
/>
)}
<Text
style={{
...textStyles.heading,
fontFamily: fonts.Bold,
color: colors.white,
}}>
{titleCase(title)}
</Text>
</View>
)}
/>
{loading && (
<View style={styles.loadingView}>
<ActivityIndicator color={colors.textPrimaryColor} size={'large'} />
</View>
)}
</View>
</Modal>
);
};
export default SectionListDropDown;
const styles = StyleSheet.create({
main_view: {
justifyContent: 'center',
backgroundColor: colors.white,
//borderTopLeftRadius: wp(5),
padding: wp(5),
paddingVertical: wp(2),
flex: 1,
//borderTopRightRadius: wp(5),
},
});