How to only add first 50 list items from a very large geojson array to sidebar instead of all

Question

I have a very large geojson file of places (1000 currenly) by which I sort through them using turf.js in order to find their distances from a point on a map (which is triggered by a geocoder). This works, however I intend to add the results of the sorted places by distance to a sidebar, and due to the large number of places (alot of calculating) it takes a long time to load. This is the current code:

[places = source geojson file containing all the info]

        geocoder.on('result', function(ev) {
    
                                        var searchResult = ev.result.geometry;
    
                                        var options = { units: 'miles' };
    
                                        //GIVES EACH PLACE A DISTANCE VALUE
                                        places.features.forEach(function(place) {
                                            Object.defineProperty(place.properties, 'distance', {
                                                value: turf.distance(searchResult, place.geometry, options),
                                                writable: true,
                                                enumerable: true,
                                                configurable: true
                                            });
                                        });
    
                                        //GIVING EACH PLACE A VALUE IN ORDER OF CLOSEST TO FURTHEST
                                        places.features.sort(function(a, b) {
                                            if (a.properties.distance > b.properties.distance) {
                                                return 1;
                                            }
                                            if (a.properties.distance < b.properties.distance) {
                                                return -1;
                                            }
                                            return 0; // a must be equal to b
                                        });
    
    
                                        var listings = document.getElementById('listings');
                                        while (listings.firstChild) {
                                            listings.removeChild(listings.firstChild);
                                        }
(the functions below go here)

(trying to create a new smaller set of places to put in the functions below - instead of using the whole 'places' file)

//THIS FUNCTION ADDS THE SORTED PLACES TO THE SIDEBAR
                                        buildLocationList(places);
                                        createPopUp(places.features[0]);
                                        }); 

So essentially im trying to create a new list of places which is locally stored depending on the result of the geocoder which is much smaller than the overall 'places' geojson file (maybe containing the 50 closest places instead of every sincle one). From this producing a function which i can pass into the buildLocationList function which adds them to sidebar.

Any help would be greatly appreciated (:

Answer 1

Try adding localStorage.setItem('TopFiftyPlaces', JSON.stringify(places.slice(49))); after sorting the places.

This line of code takes the first fifty elements of places, and then stores them in local storage.

To retrieve the stored array, you can do like this:

const topFiftyPlaces = JSON.parse(localStorage.getItem('topFiftyPlaces'));

You can then pass topFiftyPlaces variable instead of places to buildLocationList like this: buildLocationList(topFiftyPlaces);