Hello I wanted to delete record from the realtime firebase database.I have got the key which I wanted to delete, but when I call remove function on reference is shows me error "Reference.remove failed: first argument must be a valid function."
i had refer this docs.
here is my code:
home-customer.ts
deleteLoad(load) {
this.AuthProvider.removeNote(load.key).then(() => {
this.navCtrl.setRoot('HomeCustomerPage');
});
}
home-customer.html
<ion-list *ngFor="let load of LoadMaster">
<ion-item>
Source:
{{load.Source}}
</ion-item>
<ion-item>
Destination:
{{load.Destination}}
</ion-item>
<ion-item>
Load Type:
{{load.LoadType}}
</ion-item>
<button ion-button block (click)="UpdateLoad(load.key)">
Update
</button>
<button ion-button block (click)="deleteLoad(load)">
Delete
auth.ts
removeNote(key) {
console.log('key'+key);
return firebase.database().ref(`/LoadMaster/`).remove(key);
}
It's very sad since more then 3 year no answer...I think this answer will now help to others...
`var adaRef = firebase.database().ref('users/ada');
adaRef.remove()
.then(function() {
console.log("Remove succeeded.")
})
.catch(function(error) {
console.log("Remove failed: " + error.message)
});`
More can be found Firebase documentation
Related
I'm quite new to work with GeoFire and RXJS.
I need to display nearby users based on Geofire query. I tried so many ways, but it take long time, approx 9 segs (just 5-6 test users). How can I optimize it?
Thanks for the help in advance
In firebase
-locations
- userID
- g
- l
- 0:lat
- 1:long
- users
-userID
- firstname: "fname"
- lastname...
Geofire service
hits = new BehaviorSubject([]);
getNearLocations(radius: number, coords: Array<number>) {
this.geoFire.query({
center: coords,
radius: radius
})
.on('key_entered', (key, location, distance) => {
let hit = {
key: key,
location: location,
distance: distance,
}
let currentHits = this.hits.value
//this.hits.push(hit)
currentHits.push(hit)
this.hits.next(currentHits)
})
people.ts (Constructor)
this.locateActiveUser().then((pos) => {
this.geofire.getNearLocations(2, [pos.coords.latitude, pos.coords.longitud])
this.subscription = this.geofire.hits
.subscribe( nearUserArray => {
Promise.all(
nearUserArray.map(nearUser => {
this.afDatabase.object(`users/${nearUser.key}`).query.once('value')
.then( user => {
nearUser["user"]= user.val(); })
return nearUser
})).then( a => {
console.log("nearUserArray: ", nearUserArray);
this.nearbyUsers$ = of(nearUserArray);
})
})
})
people.html
<ion-item *ngFor="let nearby of nearbyUsers$ | async" class="item item-block item-md">
<ion-row>
<ion-col col-3 >...
</ion-col>
<ion-col col-9 (click)="navigateTo('user-profile', nearby.user)">
<ion-row>
<ion-col col-4 >
<span>A {{nearby.distance | roundNumber }} km</span>
</ion-col>
</ion-row>
<ion-row>
<h3> {{nearby.user.firstname}} {{nearby.user["lastname"]}}</h3>
</ion-row>
</ion-col>
</ion-row>
</ion-item>
Browser Console
enter image description here
So I will say that you are probably doing the best thing you could do.geofire is more like an index which you can get references to actual docs/objects in your Firebase RTDB. There are libraries for Firestore such as geofirestore (my personal baby), as well as geofirex that allow you to only make one query based on location and get the doc as well.
geofirestore is more similar to geofire in regards to how things work under the hood, and may be easier to make the transition to (if you were interested.)
I got a problem while updating my Ionic checkbox values to Firebase.
Here is my HTML:
<ion-list>
<ion-item>
<ion-label>Problemfeld 1</ion-label>
<ion-checkbox checked="false" [(ngModel)]="problemfeld1" name="problemfeld1"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Problemfeld 2</ion-label>
<ion-checkbox checked="false" [(ngModel)]="problemfeld2" name="problemfeld2"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Problemfeld 3</ion-label>
<ion-checkbox checked="false" [(ngModel)]="problemfeld3" name="problemfeld3"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Problemfeld 4</ion-label>
<ion-checkbox checked="false" [(ngModel)]="problemfeld4" name="problemfeld4"></ion-checkbox>
</ion-item>
</ion-list>
<button ion-button (click)="updateProblemfeld()" [navPush]="problemdefinitionPage">Weiter</button>
This is the function in my Ionic Page:
updateProblemfeld(problemfeld1, problemfeld2,problemfeld3,problemfeld4) {
this.szenarioProvider.updateProblemfeld(problemfeld1, problemfeld2, problemfeld3, problemfeld4);
}
And this is how I pass it to Firebase:
updateProblemfeld(problemfeld1: boolean, problemfeld2: boolean, problemfeld3: boolean, problemfeld4: boolean): firebase.Promise<any> {
return firebase.database().ref('/szenarioData')
.child(firebase.auth().currentUser.uid)
.child('problemfeld').update({
problemfeld1: problemfeld1,
problemfeld2: problemfeld2,
problemfeld3: problemfeld3,
problemfeld4: problemfeld4,
});
}
And this is what the Error looks like:
Firebase.update failed: First argument contains undefined in property 'szenarioData.hR4feTPka8fuMDGK3YV0nFrDs1A3.problemfeld.problemfeld1'
Can you think of a solution for this?
Thanks in advance.
My god,
I looked for a solution for 2 days till I decided to ask this question.
And 30 minutes after asking I found it:
Button in the HTML document needs to be like this:
<button ion-button (click)="updateProblemfeld(problemfeld1, problemfeld2, problemfeld3, problemfeld4)" [navPush]="problemdefinitionPage">Weiter</button>
I simply forgot to pass the values...
I developing an ionic 2 app where people can add their blood types to firebase.
Now I want to implement a search-page to receive that data from firebase, For instance, somebody wants to search for B Rh+ blood type, simply selects that radio button and when they click search I want to search B Rh+ bloods in Firebase and list them.
here is my search html:
<ion-list>
<ion-item>
<ion-label>Blood Type</ion-label>
<ion-select [(ngModel)]="bloodtype">
<ion-option value="ap">A Rh+</ion-option>
<ion-option value="an">A Rh-</ion-option>
<ion-option value="bp">B Rh+</ion-option>
<ion-option value="bn">B Rh-</ion-option>
<ion-option value="abp">AB Rh+</ion-option>
<ion-option value="abn">AB Rh-</ion-option>
<ion-option value="zp">0 Rh+</ion-option>
<ion-option value="zn">0 Rh-</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-range [(ngModel)]="range">
<ion-icon range-left small name>0km</ion-icon>
<ion-icon range-right small name>100km</ion-icon>
</ion-range>
</ion-item>
<button ion-button full icon-left (click)="presentLoading()">
<ion-icon name="search"></ion-icon>
Search
</button>
</ion-list>
and here is my search.ts:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LoadingController } from 'ionic-angular';
#Component({
selector: 'page-search',
templateUrl: 'search.html'
})
export class SearchPage {
constructor(public navCtrl: NavController,public loadingCtrl: LoadingController) {}
ionViewDidLoad() {
console.log('Hello SearchPage Page');
}
presentLoading() {
let loader = this.loadingCtrl.create({
content: "Please wait...",
duration: 3000
});
loader.present();
}
}
I tried to use search bar and receive data with this reference this.bloodRef = firebase.database().ref('/bloods'); but using search bar is not functional since people can type "brh+" or "b" etc.
my firebase hierarchy:
---bloods (id)
------ blood-type: "B Rh+"
You can filter items with orderBy and equalTo functions:
var results = [];
this.bloodRef.orderByChild('blood-type').equalTo(this.bloodtype).once("value")
.then(function(snapshot) {
//snapshot.val() is the object
});
I'm making a social media app using Ionic with a Firebase backend that I communicate with using Angularfire2.
There's a page in my app that lists all the followers of a user by receiving a uid from the NavParams and sends this to a provider that returns a FirebaseListObservable with that user's followers.
followers-page.ts
constructor(public navCtrl: NavController, public navParams: NavParams, public util: UtilProvider, public userProvider: UserProvider, public socialProvider: SocialProvider, private zone: NgZone) {
this.name = this.navParams.get('name');
this.otherUid = this.navParams.get('uid');
this.currentUid = this.userProvider.currentUid();
}
ionViewDidLoad() {
this.zone.run(() => {
this.users = this.userProvider.getUserFollowers(this.otherUid);
});
}
followers-page.html
<ion-header>
<ion-navbar color='danger'>
<ion-title>{{name}} Followers</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item style="background-color: #fff" *ngIf="!(users | async)">
<ion-avatar item-left>
<img src="assets/img/defaultAvatar.png">
<h2>Loading...</h2>
</ion-avatar>
</ion-item>
<user-item *ngFor="let user of users | async" [user]="user">
</user-item>
</ion-list>
</ion-content>
user-provider.ts
//Get List of followers of uid
getUserFollowers(uid) {
let users = this.af.database.list(`/users/${uid}/followers`, {
query: {
limitToFirst: 10
}
});
return users;
}
user-item.html
<ion-item style="background-color: #fff" text-wrap>
<ion-avatar item-left (click)="userProfile()">
<img [class]="user.visibility > 1 ? 'profile-pic verified' : 'profile-pic'" [src]="user?.avatar ? user.avatar : 'assets/img/defaultAvatar.png'">
</ion-avatar>
<h2 (click)="userProfile(user)">{{user?.name}}</h2>
<button ion-button item-right *ngIf="!(following)" (click)="followUser()">{{user?.followerCount}} Followers</button>
<button ion-button outline item-right icon-left *ngIf="following" (click)="followUser()">
<ion-icon name="checkmark"></ion-icon>Followed
</button>
</ion-item>
Without the limitToFirst query it displays the correct number of followers as user-items but the profile avatar and the name and the follower status are all blank. When I click on the avatar it pushes the correct user-profile page so the data is there but the DOM isn't being updated.
I have this exact same code in the discover tab of my app (without the NgZone) and it works perfectly there.
I tried it without the NgZone here as well but to no avail so I am just about completely lost as to how to get these users' info to display.
Thanks in advance!
I am getting data from firebase by using the below code and i am able to create an array using the below code.
fetchPeopleFromFirebase(){
Firebase fbUsers = this.fbObject.child("posts");
fbUsers.once("value", (snapshot) => {
if(snapshot.exists()) {
snapshot.forEach((object) => {
console.log("Current Post");
console.log(object.val());
Firebase fbUserDetails = this.fbObject.child("users");
var createdById = object.child('createdBy/_id').val();
console.log("Checking for : " + createdById)
fbUserDetails.child(createdById).once("value", (snapshot) => {
if(snapshot.exists()) {
console.log(snapshot.val());
}
});
this.posts.push(object.val());
});
}
console.log("firebase Data",this.posts);
}
}
I am storing the data in this.posts and i am trying to use it in the view like :
*ng-for="#post of posts"
But it does not display anything while data is being printed on the console
can anyone help me?
EDIT:
<ion-content>
<ion-card *ng-for="#post of posts">
<ion-item>
<ion-avatar item-left>
<img src="{{post.createdBy.avatarUrl}}">
</ion-avatar>
<h2>{{post.createdBy.firstName}} {{post.createdBy.lastName}}</h2>
<p>{{post.createdBy.profession}}</p>
</ion-item>
<ion-item>
<ion-list-header>{{post.title}}</ion-list-header>
<img src="{{post.image}}">
</ion-item>
<ion-card-content>
<p>{{post.description}}.</p>
</ion-card-content>
<ion-item actions class="demo-card">
<button primary clear item-left (click)="openLikesFollowers()">
<icon thumbs-up></icon>
<div>5 followers</div>
</button>
<button primary clear item-left (click)="openLikesFollowers()">
<icon text></icon>
<div>4 Comments</div>
</button>
<p item-left class="time-ago">
61 views
</p>
</ion-item>
<ion-item actions>
<p item-left class="time-ago">
+5 collegues are following this
</p>
</ion-item>
</ion-card>
</ion-content>