如何过滤已从 firebase 检索到的数据?
how to filter already retrieved data from firebase?
我在 '/posts/' 下有一个帖子列表,我已经检索了所有帖子并将其存储在一个数组中 all_posts:
get_all_posts(){
this.all_posts = [];
firebase.database().ref('/posts/').once('value').then(snapshot => {
foreach.snapshot{
let tmp_data = {
post_id: snapshot.key,
title: snapshot.val().title,
type: snapshot.val().type,
}
this.all_posts.push(tmp_data);
}
}
现在我想在单击按钮时过滤类型 = "news" 的帖子(有 2 种类型:新闻和博客)
<ion-button (click)="show_only_posts_type_news()">show only news</ion-button>
show_only_posts_types_news(){
//this.posts
// filter only type == "news"
}
有没有更简单的过滤方法all_posts?没有另一个 firebase 查询只显示新闻类型?
您可以使用 Array.filter。您可以提供一个过滤函数,它将评估和 return 只有那些满足您条件的元素。
var news_posts = this.all_posts.filter(post => post.type === 'news')
由于您已经循环浏览快照,如果您在该循环中进行过滤而不是再次循环 all_posts 以获取新闻并可能稍后获取博客,这可能会更好array.filter 在后台运行。
get_all_posts(){
this.news_posts = [];
this.blogs_posts = [];
firebase.database().ref('/posts/').once('value').then(snapshot => {
foreach.snapshot{
let tmp_data = {
post_id: snapshot.key,
title: snapshot.val().title,
type: snapshot.val().type,
}
if(tmp_data.type === 'news'
{
this.news_posts(tmp_data)
}
else
{
this.blogs_posts(tmp_data)
}
}
}
非常感谢@Ashish(对于 Array.filter 功能,打开了许多过滤数据的方式)。
@Mocas 以后会有更多种类的post,你的方法也可以
我最终这样做了,一个在点击按钮时过滤 post 类型的函数,不确定它是否最好,但按预期工作:
我先分配了3个数组:
rows = []; //the row that contains displaying data on the view
all_rows = []; //the row that contains all the posts
filtered_rows = []; //the row that contains only filtered posts
过滤函数:
filter_posts_by_type(type){
this.filtered_rows = this.all_rows;
//reset the filtered_rows with all data first
if(type == "news"){
this.rows = this.filtered_rows.filter((item) => {
return item.type.toLowerCase() == "news";
//set this.rows to contain all posts of type : news
})
}else if(type == "blog"){
this.rows = this.filtered_rows.filter((item) => {
return item.type.toLowerCase() == "blog";
//set this.rows to contain all posts of type : blog
})
}else{
// all types
this.rows = this.filtered_rows.filter((item) => {
return item.type.toLowerCase() == "news" || item.type.toLowerCase() == "blog";
//set this.rows to contain all posts types
})
}
}
我在 '/posts/' 下有一个帖子列表,我已经检索了所有帖子并将其存储在一个数组中 all_posts:
get_all_posts(){
this.all_posts = [];
firebase.database().ref('/posts/').once('value').then(snapshot => {
foreach.snapshot{
let tmp_data = {
post_id: snapshot.key,
title: snapshot.val().title,
type: snapshot.val().type,
}
this.all_posts.push(tmp_data);
}
}
现在我想在单击按钮时过滤类型 = "news" 的帖子(有 2 种类型:新闻和博客)
<ion-button (click)="show_only_posts_type_news()">show only news</ion-button>
show_only_posts_types_news(){
//this.posts
// filter only type == "news"
}
有没有更简单的过滤方法all_posts?没有另一个 firebase 查询只显示新闻类型?
您可以使用 Array.filter。您可以提供一个过滤函数,它将评估和 return 只有那些满足您条件的元素。
var news_posts = this.all_posts.filter(post => post.type === 'news')
由于您已经循环浏览快照,如果您在该循环中进行过滤而不是再次循环 all_posts 以获取新闻并可能稍后获取博客,这可能会更好array.filter 在后台运行。
get_all_posts(){
this.news_posts = [];
this.blogs_posts = [];
firebase.database().ref('/posts/').once('value').then(snapshot => {
foreach.snapshot{
let tmp_data = {
post_id: snapshot.key,
title: snapshot.val().title,
type: snapshot.val().type,
}
if(tmp_data.type === 'news'
{
this.news_posts(tmp_data)
}
else
{
this.blogs_posts(tmp_data)
}
}
}
非常感谢@Ashish(对于 Array.filter 功能,打开了许多过滤数据的方式)。 @Mocas 以后会有更多种类的post,你的方法也可以
我最终这样做了,一个在点击按钮时过滤 post 类型的函数,不确定它是否最好,但按预期工作:
我先分配了3个数组:
rows = []; //the row that contains displaying data on the view
all_rows = []; //the row that contains all the posts
filtered_rows = []; //the row that contains only filtered posts
过滤函数:
filter_posts_by_type(type){
this.filtered_rows = this.all_rows;
//reset the filtered_rows with all data first
if(type == "news"){
this.rows = this.filtered_rows.filter((item) => {
return item.type.toLowerCase() == "news";
//set this.rows to contain all posts of type : news
})
}else if(type == "blog"){
this.rows = this.filtered_rows.filter((item) => {
return item.type.toLowerCase() == "blog";
//set this.rows to contain all posts of type : blog
})
}else{
// all types
this.rows = this.filtered_rows.filter((item) => {
return item.type.toLowerCase() == "news" || item.type.toLowerCase() == "blog";
//set this.rows to contain all posts types
})
}
}