typeahead.js 不从本地获取数据

问题描述

首先，这是一个新手问题:) 抱歉打扰您...

我设法从 Firebase Firestore 获取数据，并将该数据放入一个变量中。

var db = firebase.firestore();
  let contentJSON = [];
db.collection("blog-posts").get().then(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {
var listTemp = {
    "category": doc.data().category,"content": doc.data().content,"date": doc.data().date,"slug": doc.data().slug,"title": doc.data().title
  };
contentJSON.push(listTemp)
    });
});

然后我用这个本地数据创建新的 Bloodhund 实例。

var blogPosts = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('content'),queryTokenizer: Bloodhound.tokenizers.whitespace,local: contentJSON,});

当我搜索此设置时没有任何显示。 我尝试使用 Prefetch 方法使用外部 JSON 运行它并且它工作正常，但是，我需要使用本地数据运行它。我认为本地数据变量的结构有问题。你能帮我看看吗？

解决方法

这可能是一个 AJAX 问题，可以通过 promise 和 async/await 解决。

第一个代码体必须解析 .then() 您可以运行第二个代码体。否则，firebase 代码在猎犬之后完成，并且必须在之前完成。

如果你把firebase代码放到这样的函数中

// (1) add async here
async getBlogPosts() {
  var db = firebase.firestore();
  // (2) add return here
  return db.collection("blog-posts").get().then(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {
    // (3) move variable in here
    let contentJSON = [];
    var listTemp = {
    "category": doc.data().category,"content": doc.data().content,"date": doc.data().date,"slug": doc.data().slug,"title": doc.data().title
    };
    contentJSON.push(listTemp)
    // (4) return here
    return contentJSON
    });
});

然后在前端代码中使用 await 调用它

// (5) the async await will make sure this function happens before we proceed
var contentJSON = await getBlogPosts()
var blogPosts = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('content'),queryTokenizer: Bloodhound.tokenizers.whitespace,local: contentJSON,});