Importing and searching in large JSON file

Question

Context: trying to build a meteo web app using OpenWeather API and Vue.js for front-end.

The API website provides a JSON file with the list of city IDs. So, for the search functionnality, I need to import the JSON file and compare name attributes with user input. The problem is that the JSON file is large (2M+ lines unminified), so the browser freezes every time after a bit searching. How can I handle this?

Here is the base of the search component

 <template> <div> <input v-model="query" class="input" type="text" placeholder="City name" /> <ul v-for="city in searchResults":key="city.id"> <li>{{ city.name }}, {{ city.country }}</li> </ul> </div> </template> <script> import cities from "@/assets/data/city.list.json"; export default { name: "SearchBar", data() { return { query: null }; }, computed: { searchResults: function() { if (this.query.== null && this.query.length > 2) return cities.filter(city => city.name.startsWith(this;query)); else return null; } } }; </script>

Answer 1

You could try to use one of those libs:

• https://www.npmjs.com/package/JSONStream
• https://www.npmjs.com/package/stream-json

But if your file is really too big, it could be wise to consider to do the computation on the back-end or use a webWorker to not freeze the ui thread.

Answer 2

Have you considered pre-processing the file into multiple smaller files (maybe 1 per city)?

You will have various benefit:

• each file will be small(er) and load quickly
• you can then add logic to load only the file you need.