时间戳

首页 > 解决方案 > 在大型 JSON 文件中导入和搜索

javascript - 在大型 JSON 文件中导入和搜索

问题描述

上下文：尝试使用OpenWeather API和 Vue.js 为前端构建一个气象网络应用程序。

API 网站提供了一个带有城市 ID 列表的JSON 文件。因此，对于搜索功能，我需要导入 JSON 文件并将名称属性与用户输入进行比较。问题是 JSON 文件很大（2M+ 行未压缩），所以浏览器每次搜索后都会冻结。我该如何处理？

这是搜索组件的基础

<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>

标签： javascriptjsonvue.js

解决方案

您可以尝试使用其中一个库：

但是如果你的文件真的太大，考虑在后端进行计算或者使用 webWorker 来不冻结 ui 线程可能是明智的。

推荐阅读