0

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?

jas1533
  • 11
  • 2
  • There is a space in `latitude: +b. lat1`. – fizzybear Jul 08 '19 at 00:34
  • Can you post your getDistance function? – Mark Jul 08 '19 at 00:37
  • @fizzybear thanks I corrected that but it didn't change the expected behavior – jas1533 Jul 08 '19 at 01:22
  • @Mark i am using getDistance from geolib https://github.com/manuelbieh/geolib so i just imported up to as import {getDistance} from 'geolib' -- would that not work? – jas1533 Jul 08 '19 at 01:24
  • @jas1533, that should be fine then. Can you try doing the sort before the return like this? `const sortedData = this.state.dataSource.sort((a,b) => { ...` And then put a console.log after the sort like this: `console.log(sortedData);` And finally ` – Mark Jul 08 '19 at 01:44
  • @Mark thanks, do you mean as follows? `const sortedData = this.state.dataSource.sort((a,b) => {... })` `console.log(sortedData);` `return ( – jas1533 Jul 08 '19 at 02:10
  • Are lat1 and lon1 the correct property names in your dataSource array of objects? Can you console.log some of your dataSource array and add it to your question above? – Mark Jul 08 '19 at 02:31
  • // this seems to work const geolib = require('geolib'); const data = [ {lat1: 80, lon1: -80}, {lat1: 60, lon1: -60}, {lat1: 70, lon1: -70}, {lat1: 51, lon1: -51}, ]; const sorted=data.sort((a,b) => { const aDist = geolib.getDistance({ latitude: +a.lat1, longitude: +a.lon1 }, { latitude: 50, longitude: -50, }) const bDist = geolib.getDistance({ latitude: +b. lat1, longitude: +b.lon1 }, { latitude: 50, longitude: -50 }) return aDist - bDist; }) console.log(sorted); – Mark Jul 08 '19 at 02:35
  • @Mark it was the property name - i had long1 in the array instead of lon1; thanks so much sorry i'm still new to this :) – jas1533 Jul 08 '19 at 03:12
  • Great to hear you solved it! And no need to apologise, we all make these little mistakes – Mark Jul 08 '19 at 11:09

0 Answers0