I am trying to create an app that shows schools close to your location. I am fetching a json and pulling in the addresses and the miles from the current location, but the flatlist is not sorting by least amount of miles.
I have tried following the steps listed in this thread sorting the items in the flatList, but my flatlist is not sorted in distance order.
Here is how I am fetching the json:
componentDidMount() {
return fetch('json api')
.then(response => response.json())
.then(responseJson => {
this.setState({
dataSource: responseJson.schools,
isLoading: false,
});
})
.catch(error => {
console.error(error);
});
}
Here is my flatlist (lat1 and lon1 are from the json, and I am hard coding the latitude and longitude right now until I figure out how to insert my current location):
return (
<View style={styles.container}>
<FlatList
data={this.state.dataSource.sort((a,b) => {
const aDist = getDistance({
latitude: +a.lat1,
longitude: +a.lon1
}, {
latitude: 50,
longitude: -50,
})
const bDist = getDistance({
latitude: +b. lat1,
longitude: +b.lon1
}, {
latitude: 50,
longitude: -50
})
return aDist - bDist;
})}
ItemSeparatorComponent={this.FlatListItemSeparator}
renderItem={this._renderItem}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
The information is all showing correctly but not in the correct order. What exactly am I doing wrong?