Currently working on a project using Ionic and Firebase, I am faced with the task of comparing arrays produced by users with those stored in Firebase. This comparison is essential for filtering a list of products.
The user can reorder a list containing 3 items (A, B, and C). The order set by the user should then be used to filter another list of products that possess the characteristics A, B, and C. These products are assigned scores and need to be sorted in descending order based on the user's specified sequence.
To achieve this, I must match the user's sorting and only display products that align with their specific order. For example, if the user organizes items as B, A, C, only products sorted in the same way will be shown in the results. This means a product with values A = 50, B = 100, and C = 30 would have an array defined as desOrder = [B, A, C].
An example structure for data stored in Firebase may resemble the following:
- XMnL8KVlJXXXXXXXXXX
name: "Product 1"
- desOrder
0: "B"
1: "A"
2: "C"
- XMnX2KVlJXXXXXXXXXX
name: "Product 2"
- desOrder
0: "C"
1: "B"
2: "A"
- XnP33RRmNXXXXXXXXXX
name: "Product 3"
- desOrder
0: "A"
1: "C"
2: "B"
Within the HTML file 'search.html', you can find the code snippet below:
<ion-list no-lines>
<ion-item-group class="reordenar" reorder="true" (ionItemReorder)="reorderItem($event)">
<ion-item *ngFor="let item of orderItems">
{{ item }}
</ion-item>
</ion-item-group>
</ion-list>
In the corresponding TypeScript file 'search.ts' section, we have the following code:
orderItems: any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.orderItems = ["A", "B", "C"];
}
reorderItem(indexes){
this.orderItems = reorderArray(this.orderItems, indexes);
console.log(this.orderItems); // e.g., could be ["B", "C", "A"]
}
searchTo(){
this.navCtrl.push(ListPage, {this.orderItems});
}
At the moment, all products are being displayed without any form of filtering. See 'list.ts' code snippet below:
products: any;
constructor(public navCtrl: NavController, public navParams: NavParams, public listservice: ListService) {
this.getaData();
}
getData(){
this.products = this.listservice.getAll();
}
'list-service.ts' contains the following logic related to fetching all product data:
getAll(){
return this.db.list('product/').snapshotChanges()
.map(changes =>{
return changes.map(c=> {
const data = c.payload.val();
const id = c.payload.key;
return { id, ...data };;
});
})
}
The main focus lies in maintaining the correct ordering, as each product has the same three characteristics and associated scores (distinct from the discussion on this question).