typeahead.js 没有从本地获取数据

Question

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

我已设法从 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 运行它并且它有效，但是，我需要使用本地数据运行它。我认为本地数据变量的结构存在问题。你能帮我看看吗？

Answer 1

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

第一段代码必须解析.then()你可以运行第二段代码。否则，firebase 代码会在 Bloodhound 之后完成，并且必须在此之前完成。

如果你将 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,
  });