I am having an issue when I try to get a specified user from Firebase, Firestore.
export class TaskService {
tasksCollection: AngularFirestoreCollection<Task>;
taskDoc: AngularFirestoreDocument<Task>;
tasks: Observable<Task[]>;
task: Observable<Task>;
constructor(private afs: AngularFirestore) {
this.tasksCollection = this.afs.collection('tasks', ref => ref.orderBy('title', 'asc'));
}
getTask(id: string): Observable<Task> {
this.taskDoc = this.afs.doc<Task>(`clients/${id}`);
this.task = this.taskDoc.snapshotChanges().pipe(map(action => {
if (action.payload.exists === false) {
return null;
} else {
const data = action.payload.data() as Task;
data.id = action.payload.id;
return data;
}
}));
return this.task;
}
}
And this is my Component.ts file
export class TaskDetailsComponent implements OnInit {
id: string;
task: Task;
hasHours = false;
showHoursOnUpdate: false;
constructor(
private taskService: TaskService,
private router: Router,
private route: ActivatedRoute
) { }
ngOnInit() {
// Get id from url
this.id = this.route.snapshot.params.id;
// Get client
this.taskService.getTask(this.id).subscribe(task => {
if (task != null) {
if (task.hours > 0) {
this.hasHours = true;
}
}
this.task = task;
});
console.log(this.id);
console.log(this.task);
}
}
The result for id is good.
But the result for object (task) is undefined.
P.S
I also have functions for getting all the users and adding a new user, so if that's relevant please let me know in the comments
Your line of code
this.id = this.route.snapshot.params.id;
In this case id is not a table column but it's your document id by Firestore
Here an example of firestore
So your Id in this case is the red one and not the blue one.
Related
In this code I retrieve data about a country as an observable. I then try to compare my string this.city with this.capital which I retrieved from the Observable. If the two do not equal I want to display a new paragraph in the html by changing the hidden boolean to false. I know that this.city and the observable this.capital are not equal but it does not display the paragraph in the html after calling showHeader().
I wonder if you can compare Observable data with strings in this way?
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { SettingsPage } from '../../pages/settings/settings';
import { Storage } from '#ionic/storage';
import { CityDataProvider } from '../../providers/city-data/city-data';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
hidden: boolean = true;
hiddenTwo: boolean = true;
city: string;
cityData: any[];
capital: string;
cityLowerCase: string;
constructor(public navCtrl: NavController, private storage: Storage, private cdp: CityDataProvider) {
}
async ionViewWillEnter() {
const data = await this.storage.get("city")
.then((value) => {
if (value == null) { this.hidden = false; } else if (value !== null) { this.hidden = true; }
this.city = value;
})
.catch((error) => {
alert("Error accessing storage.")
})
this.cdp.getCityData(this.city).subscribe(data => {
this.cityData = data;
this.capital = data[0].capital.toString().toLowerCase();
this.cityLowerCase = this.city.toLowerCase();
this.showHeader(this.cityLowerCase, this.capital);
});
}
showHeader(a: string, b: string) {
if (a != b){
this.hiddenTwo = false;
}
}
openSettingsPage() {
this.navCtrl.push(SettingsPage);
};`enter code here`
}
As you are using then on this.storage.get("city"), this.city has not been set yet when you call this.cdp.getCityData(this.city). Just use await properly.
Also, some basic tips:
if(a == b){...} else if(a != b){...} is essentially just if(a == b){...}else{...}
if(condition){value = true}else{value = false} is essentially just value = condition
async ionViewWillEnter() {
try
{
this.city = await this.storage.get("city");
this.hidden = this.city == null;
}
catch (error)
{
alert("Error accessing storage.")
}
this.cdp.getCityData(this.city).subscribe(data =>
{
this.cityData = data;
this.capital = data[0].capital.toString().toLowerCase();
this.cityLowerCase = this.city.toLowerCase();
this.showHeader(this.cityLowerCase, this.capital);
});
}
showHeader(a: string, b: string) {
this.hiddenTwo = a != b;
}
I'm trying to send the selected data in my table row that I am selecting via a checkbox to the server but having questions about how it should be sent via a service. I have the basic skeleton but need help with getting the items to a delete REST API call. Using C# .Net Core JSON call as the server endpoint for this service call.
view.component.ts
#Component({
templateUrl: 'view.component.html'
})
export class ViewComponent implements OnInit, OnDestroy {
// User Fields
currentUser: User;
users: User[] = [];
currentUserSubscription: Subscription;
loading : boolean;
// Action Fields
viewData: any;
viewName: string;
refNumber: number;
currentActionSubscription: Subscription;
displayedColumns: string[] = [];
dataSource: any = new MatTableDataSource([]);
pageSizeOptions: number[] = [10, 20, 50];
#ViewChild(MatSort) sort: MatSort;
#ViewChild(MatPaginator) paginator: MatPaginator;
selection = new SelectionModel<TableRow>(true, []);
defaultSort: MatSortable = {
id: 'defColumnName',
start: 'asc',
disableClear: true
};
defaultPaginator: MatPaginator;
constructor(
private iconRegistry: MatIconRegistry,
private sanitizer: DomSanitizer,
private actionService: ActionService
) {
this.loading = false;
this.iconRegistry.addSvgIcon(
'thumbs-up',
this.sanitizer.bypassSecurityTrustResourceUrl(
'assets/img/examples/thumbup-icon.svg'
)
);
}
loadAction(action: any) {
this.loading = true;
// If there is already data loaded into the View, cache it in the service.
if (this.viewData) {
this.cacheAction();
}
if (this.sort) {
// If there is sorting cached, load it into the View.
if (action.sortable) {
// If the action was cached, we should hit this block.
this.sort.sort(action.sortable);
} else {
// Else apply the defaultSort.
this.sort.sort(this.defaultSort);
}
}
if (this.paginator) {
// If we've stored a pageIndex and/or pageSize, retrieve accordingly.
if (action.pageIndex) {
this.paginator.pageIndex = action.pageIndex;
} else { // Apply default pageIndex.
this.paginator.pageIndex = 0;
}
if (action.pageSize) {
this.paginator.pageSize = action.pageSize;
} else { // Apply default pageSize.
this.paginator.pageSize = 10;
}
}
// Apply the sort & paginator to the View data.
setTimeout(() => this.dataSource.sort = this.sort, 4000);
setTimeout(() => this.dataSource.paginator = this.paginator, 4000);
// Load the new action's data into the View:
this.viewData = action.action;
this.viewName = action.action.ActionName;
this.refNumber = action.refNumber;
// TODO: add uniquifiers/ids and use these as the sort for table
const displayedColumns = this.viewData.Columns.map((c: { Name: any; }) => c.Name);
displayedColumns[2] = 'Folder1';
this.displayedColumns = ['select'].concat(displayedColumns);
// tslint:disable-next-line: max-line-length
const fetchedData = this.viewData.DataRows.map((r: { slice: (arg0: number, arg1: number) => { forEach: (arg0: (d: any, i: string | number) => any) => void; }; }) => {
const row = {};
r.slice(0, 9).forEach((d: any, i: string | number) => (row[this.displayedColumns[i]] = d));
return row;
});
this.dataSource = new MatTableDataSource(fetchedData);
this.loading = false;
}
// Stores the current Action, sort, and paginator in an ActionState object to be held in the action service's stateMap.
cacheAction() {
let actionState = new ActionState(this.viewData);
// Determine the sort direction to store.
let cachedStart: SortDirection;
if (this.sort.direction == "desc") {
cachedStart = 'desc';
} else {
cachedStart = 'asc';
}
// Create a Sortable so that we can re-apply this sort.
actionState.sortable = {
id: this.sort.active,
start: cachedStart,
disableClear: this.sort.disableClear
};
// Store the current pageIndex and pageSize.
actionState.pageIndex = this.paginator.pageIndex;
actionState.pageSize = this.paginator.pageSize;
// Store the refNumber in the actionState for later retrieval.
actionState.refNumber = this.refNumber;
this.actionService.cacheAction(actionState);
}
ngOnInit() {
// Subscribes to the action service's currentAction, populating this component with View data.
this.actionService.currentAction.subscribe(action => this.loadAction(action));
}
/** Whether the number of selected elements matches the total number of rows. */
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
/** Selects all rows if they are not all selected; otherwise clear selection. */
masterToggle() {
this.isAllSelected()
? this.selection.clear()
: this.dataSource.data.forEach((row: TableRow) => this.selection.select(row));
}
// Delete row functionality
deleteRow() {
console.log(this.selection);
this.selection.selected.forEach(item => {
const index: number = this.dataSource.data.findIndex((d: TableRow) => d === item);
console.log(this.dataSource.data.findIndex((d: TableRow) => d === item));
this.dataSource.data.splice(index, 1);
this.dataSource = new MatTableDataSource<Element>(this.dataSource.data);
});
this.selection = new SelectionModel<TableRow>(true, []);
this.actionService.deleteRow(this.selection).subscribe((response) => {
console.log('Success!');
});
}
ngOnDestroy() {
}
}
view.service.ts
deleteRow(selection: any): Observable<{}> {
console.log('testing service');
return this.http.delete<any>(`http://localhost:15217/actions/deleteRow`);
}
There are 2 things that your code as it currently stands needs to do:
Pass the ids of the selected rows back to the server in some way (generally via the url in a DELETE request)
Subscribe to the observable to materialise it. Currently the http request won't run, because it's an observable without any subscribers. At the very least the call to the service in the component should look a little like this:
this.actionService.deleteRow(this.selection).subscribe((response) => {
console.log('Success!');
});
Edit:
With number 1, it depends on what your server method looks like. If it accepts an array of numeric ids, then view.service.ts would look something like:
deleteRow(selection: SelectionModel<TableRow>): Observable<{}> {
console.log('testing service');
// create an array of query params using the property that you use to identify a table row
const queryParams = selection.selected.map(row => `id=${row.id}`);
// add the query params to the url
const url = `http://localhost:15217/actions/deleteRow?${queryParams.join('&')}`;
return this.http.delete<any>(url);
}
I'm guessing here at how you pass information about table rows to your server. If you're still struggling with this, you will need to provide a bit of information about the DELETE endpoint.
Edit 2:
Now we know a bit more about what the objects look like...
deleteRow(selection: SelectionModel<TableRow>): Observable<{}> {
console.log('testing service');
// create an array of query params using the property that you use to identify a table row
const queryParams = [...selection._selection].map(row => `id=${row.id}`);
// add the query params to the url
const url = `http://localhost:15217/actions/deleteRow?${queryParams.join('&')}`;
return this.http.delete<any>(url);
}
can any one please tell me why I can not loop through this array?
In ngOnInit, everything works fine. I got an array that I successfully display in the template.
But in ngAfterViewInit, console.log show the array but when looping through with "for of" or "forEach", nothing works.
import { JobsService } from '../jobs.service';
import {Job} from '../models/Job';
#Component({
selector: 'app-job',
templateUrl: 'job.component.html'
})
export class JobComponent implements OnInit, AfterViewInit {
title = 'Job';
jobs: Job[] = [];
InProcess = '';
CurrentPartner = '';
ShowProcess = false;
sended = '';
constructor(private jobsService: JobsService) {
}
ngOnInit() {
this.jobs = this.jobsService.getJobs();
}
ngAfterViewInit() {
console.log(this.jobs); // Show the array
// Nothing happened when looping through the array
this.jobs.forEach((oneJob) => {
console.log(oneJob);
});
}
}
Screenshot of the console in Google Chrome
The content of the service:
import { HttpClient, HttpErrorResponse } from '#angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import {Job} from './models/Job';
interface IJob {
message: string;
jobs: any[];
}
#Injectable({
providedIn: 'root'
})
export class JobsService {
constructor(private httpClient: HttpClient) { }
private REST_API_SERVER = 'http://localhost:8080/myband/api/getjobs.php';
private REST_API_SERVER_SEND = 'http://localhost:8080/myband/api/sendjob.php';
jobList: Job[] = [];
errorMessage: any;
message: string;
static handleError(err: HttpErrorResponse) {
let errorMessage = '';
if (err.error instanceof ErrorEvent) {
errorMessage = `An error occurred: ${err.error.message}`;
} else {
errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
}
console.error(errorMessage);
return throwError(errorMessage);
}
public getJobs() {
this.requestJobs().subscribe(
iJob => {
this.message = iJob.message;
for (const job of iJob.jobs) {
const oneJob: Job = new Job(job);
this.jobList.push(oneJob);
}
},
error => this.errorMessage = error as any
);
return this.jobList;
}
public requestJobs(): Observable<IJob> {
return this.httpClient.get<IJob>(this.REST_API_SERVER).pipe(
catchError(JobsService.handleError)
);
}
}
The first thing I want to say to you is about isolation of responsibilities.
Your service must have just one job: provider one way to access your data; It means your logic inside getJobs() method could be done in your component.
export class JobsService {
constructor(
private httpClient: HttpClient,
) {}
private REST_API_SERVER = 'http://localhost:8080/myband/api/getjobs.php';
public requestJobs(): Observable<IJob> {
return this.httpClient.get<IJob>(this.REST_API_SERVER);
}
}
Now, you can handler your data in your component.
import { JobsService } from '../jobs.service';
#Component({
selector: 'app-job',
templateUrl: 'job.component.html'
})
export class JobComponent implements OnInit, AfterViewInit {
title = 'Job';
jobs$;
InProcess = '';
CurrentPartner = '';
ShowProcess = false;
sended = '';
constructor(private jobsService: JobsService) {
}
ngOnInit() {
this.jobs$ = this.jobsService.requestJobs();
}
ngAfterViewInit() {
this.jobs$
.pipe(
map(() => {}), // change your data here
catchError(() => {}) // handler your error here;
)
.subscribe(
() => {} // have access to your final data here.
);
}
}
Things to know:
You can remove the subscribe() execution and use the async pipe in your template;
The use of the operator map in pipe() is optional, you can handler your final data directly from your first callback subscribe().
You can convert your Observable to Promise using toPromise() method in one observable. Don't forgot async / await in your ngAfterViewInit.
Let me know if there is something I can help.
Try:
Object.keys(this.jobs).forEach(job => {
console.log(this.jobs[job]);
});
Try to assign an iterator function with below part replacement by this code:
// Nothing happened when looping through the array
this.jobs.forEach(oneJob, function(value, key) {
console.log(key + ': ' + value);
});
Usage of forEach in AngularJS:
For documentation try to check AngularJS forEach Docs
Syntax:
someIterable.forEach(object, iterator, [context])
Please check below example
class Job {
id: any;
status: any;
constructor(obj: any) {
this.id = obj.id;
this.status = obj.status;
}
}
let arr = [
{
id: 1,
status: "job"
}, {
id: 2,
status: "job2"
}
];
let newArr: any = [];
arr.forEach(a => {
let obj: Job = new Job(a);
newArr.push(obj);
})
console.log(newArr);
newArr.forEach((a: any) => {
console.log(a);
})
My goal is to create a portfolio page where the user can add arworks by filling a form (titel, technique, image, yaer etc.). Submited data will be added to an array and presented in a form of a list.
I'm able to upload the array to the firebase but I don't know how to upload it when the site starts. I want it to update and refresh the list on the page each time I submit an item. I spent hours looking for the right way to do it.
//SERVER.SERVICE
export class ServerService {
url:string = 'https://basic-31cd5.firebaseio.com';
constructor(
private httpClient: HttpClient,
private artService:ArtService
) { }
storeArtworks() {
return this.httpClient.put( this.url +"/artworks.json",
this.artService.getArtworks());
}
getArtworks() {
return this.httpClient.get<HttpResponse<Art[]>>
(this.url+"/artworks.json")};
}
//ART.SERVIVCE
import { Art } from "../modules/art.module"
import { Subject } from 'rxjs';
export class ArtService{
listChanged = new Subject<Art[]>();
public list: Art[] = [];
// new Art ("The Young Ladies of Avignon", "painting", 1907),
// new Art ("Kiss", "painting", 1908),
// new Art ("Dance", "painting", 1911)
subject = new Subject<string>();
setArt(artworks:Art[]=[]){
this.list = artworks;
this.listChanged.next(this.list);
}
getArtworks() {
return this.list;
}
addArt(f){
this.list.push( new Art( f.value.titel, f.value.technique, f.value.year));
}
remove(titel){
// this.list.splice(i, 1)
for (let i = 0; i < this.list.length; i++) {
if( this.list[i].titel === titel )
{ this.list.splice( i,1 ) }
}
}
}
//DashboardComponent
list;
constructor(
private serverService:ServerService, private artService:ArtService )
{}
ngOnInit() {
this.list = this.artService.getArtworks();
}
submit(form:NgForm){
this.artService.addArt(form);
}
removeItem(titel){
this.artService.remove(titel)
}
onSave(){
this.serverService.storeArtworks()
.subscribe( (res:Response) => console.log(res));
}
}
Try this code:
getList() {
let listDB = this.db.database.ref('/tasks').child(this.uid);
listDB.on('value', (snapshot) => {
const items = snapshot.val();
if(items) {
this.list = Object.keys(items).map(i => items[i]);
console.log('this.list', this.list)`enter code here`;
}
})
}
I would like to update a Firestore model containing a profile name and a list of hashtags with Angular 6. The "name" is stored as the value of a document field and the "hashtags" are stored as the keys of an object. When I try to update the database entry, my program adds a new document field called "data" every time I call the update function instead of updating the existing fields.
How can I fix this?
This is how my firestore looks like before the update.
My update function adds a new "data" field instead of updating everytime I call it.
My Firestore Service:
export class MembersService {
membersCollection: AngularFirestoreCollection<Member>;
members$: Observable<Member[]>;
memberDoc: AngularFirestoreDocument<Member>;
constructor(public afs: AngularFirestore) {
this.membersCollection = afs.collection<Member>('Members');
this.members$ = this.membersCollection.snapshotChanges().pipe(
map(actions => actions.map(a => {
const data = a.payload.doc.data() as Member;
const id = a.payload.doc.id;
return { data, id };
}))
);
}
getMembers(): Observable<Member[]> {
return this.members$;
}
updateMember(member: Member) {
this.memberDoc = this.afs.doc(`Members/${member.id}`);
this.memberDoc.update(member);
}
}
My input component.ts:
export class MembersComponent implements OnInit {
members: Member[];
editState: boolean;
membertoEdit: Member;
constructor(private membersService: MembersService) {
this.editState = false;
}
ngOnInit() {
this.membersService.getMembers().subscribe(members => {
this.members = members;
});
}
editMember(member: Member) {
this.editState = true;
this.membertoEdit = member;
}
clearState() {
this.editState = false;
this.membertoEdit = null;
}
submit(member: Member, editName: string, editHashtag: string) {
if ( editName !== '' && editHashtag !== '') {
this.membertoEdit.name = editName;
const key = editHashtag;
const object = {};
object[key] = true;
this.membertoEdit.hashtag = object;
this.membersService.updateMember(this.membertoEdit);
}
this.clearState();
}
}
My component.html for the user Input:
<button *ngIf="editState == false" (click)="editMember(member)">edit</button>
<div *ngIf="editState && membertoEdit.id == member.id">
<form>
<input type="text" #editName>
<input type="text" #editHashtag>
<button (click)="submit(member, editName.value, editHashtag.value);
editName.value=''">Submit</button>
</form>>
</div>
Found a solution: Even I don´t think it is elegant. It´s possible to pass every input on its own
updateMember(member: Member, editName: string, editHashtag: object) {
this.memberDoc = this.afs.doc(`Members/${member.id}`);
console.log(this.memberDoc);
this.memberDoc.update({
name: editName,
hashtag: editHashtag
});
}
submit(member: Member, editName: string, editHashtag: string) {
if ( editName !== '' && editHashtag !== '') {
const key = editHashtag;
const object = {};
object[key] = true;
this.membersService.updateMember(member, editName, object);
}
this.clearState();
}