I am writing an application for a grocery list with Ionic, and I’m currently trying to integrate the information in mongoDB with my Ionic app. However, when I run ‘ionic serve’, the only thing that loads in the browser is ‘Cannot GET /’. I’m not sure where I’ve gone wrong in my code. Any help would be greatly appreciated! I’ve included the code for my ‘Groceries-Service’ service. When I compile, I get the error 'Type Observable<{}> is not assignable to type ‘Observable<object[ ]>’. I think the problem is in the getItems function.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { map, catchError } from 'rxjs/operators';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class GroceriesServiceService {
items: any = [];
dataChanged$: Observable<boolean>;
private dataChangeSubject: Subject<boolean>;
baseURL = "http://localhost:8080";
constructor(public http: HttpClient) {
console.log('Hello GroceriesServiceProvider Provider');
this.dataChangeSubject = new Subject<boolean>();
this.dataChanged$ = this.dataChangeSubject.asObservable();
}
getItems(): Observable<object[]> {
return this.http.get(this.baseURL + '/api/groceries').pipe(
map(this.extractData),
catchError(this.handleError)
);
}
private extractData(res: Response) {
let body = res;
return body || {};
}
private handleError(error: Response | any) {
let errMsg: string;
if (error instanceof Response) {
const err = error | '';
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}
removeItem(id){
console.log("#### Remove Item - id = ", id);
this.http.delete(this.baseURL + "/api/groceries/" + id).subscribe(res => {
this.items = res;
this.dataChangeSubject.next(true);
});
}
addItem(item){
this.http.post(this.baseURL + "/api/groceries", item).subscribe(res => {
this.items = res;
this.dataChangeSubject.next(true);
})
}
editItem(item, index) {
console.log("Editing item = ", item);
this.http.put(this.baseURL + "/api/groceries/" + item._id, item).subscribe(res => {
this.items = res;
this.dataChangeSubject.next(true);
});
}
}