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代码在猎犬之后完成，并且必须在之前完成。

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

然后在你的前端代码中等待它

// (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,
});