We Keep Coding

SyntaxError: Unexpected token in Angular

I want to add my website a user's profile updater. But when I try to open user's profile in my website, I have that error in Angular:
main.ts:6 ERROR SyntaxError: Unexpected token 'e', "eyJhbGciOi"... is not valid JSON
at JSON.parse (<anonymous>)
at LocalStorageService.getItem (local-storage.service.ts:17:22)
at get getDecodedToken [as getDecodedToken] (auth.service.ts:39:42)
at get getCurrentUserId [as getCurrentUserId] (auth.service.ts:44:29)
at UserComponent.getUserById (user.component.ts:51:51)
at UserComponent.ngOnInit (user.component.ts:28:10)
at callHook (core.mjs:2752:22)
at callHooks (core.mjs:2721:17)
at executeInitAndCheckHooks (core.mjs:2672:9)
at refreshView (core.mjs:12084:21)`
My local-storage.service.ts:
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class LocalStorageService {
constructor() { }
setItem(key:string, value:any){
let json = JSON.stringify(value);
localStorage.setItem(key, json);
}
getItem(key:string){
let json = localStorage.getItem(key);
let value = JSON.parse(json);
return value;
}
isSaved(key: string) {
if (localStorage.getItem(key)) {
return true;
}
return false;
}
remove(key: string) {
localStorage.removeItem(key);
}
removeAll() {
localStorage.clear();
}
}
auth.service.ts:
`import { HttpClient } from '#angular/common/http';
import { Injectable } from '#angular/core';
import { LoginModel } from '../models/loginModel';
import { SingleResponseModel } from '../models/singleResponseModel';
import { TokenModel } from '../models/tokenModel';
import { LocalStorageService } from './local-storage.service';
import { UserPasswordModel } from '../models/userPasswordModel';
import { ResponseModel } from '../models/responseModel';
import { JwtHelperService } from '#auth0/angular-jwt';
#Injectable({
providedIn: 'root'
})
export class AuthService {
apiUrl="https://localhost:5001/api/auth/";
public jwtHelperService: JwtHelperService = new JwtHelperService();
constructor(private httpClient:HttpClient,
private localStorageService:LocalStorageService) {}
login(user:LoginModel){
return this.httpClient.post<SingleResponseModel<TokenModel>>(this.apiUrl+"login", user);
}
isAuthenticated(){
if (localStorage.getItem("token")) {
return true;
}else{
return false;
}
}
updatePassword(userPasswordModel:UserPasswordModel){
let newUrl = this.apiUrl + "updatepassword";
return this.httpClient.post<ResponseModel>(newUrl, userPasswordModel)
}
get getDecodedToken() {
let token = this.localStorageService.getItem("token");
return this.jwtHelperService.decodeToken(token);
}
get getCurrentUserId() {
let decodedToken = this.getDecodedToken;
let userIdString = Object.keys(decodedToken).filter((t) =>
t.endsWith('/nameidentifier')
)[0];
let userId: number = decodedToken[userIdString];
return userId;
}
}
user.component.ts:
import { Component, OnInit } from '#angular/core';
import { FormBuilder, FormGroup, Validators } from '#angular/forms';
import { ToastrService } from 'ngx-toastr';
import { User } from 'src/app/models/user';
import { AuthService } from 'src/app/services/auth.service';
import { ProfileService } from 'src/app/services/profile.service';
#Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
user:User;
profileForm:FormGroup;
passwordForm:FormGroup;
dataLoaded = false;
constructor(
private userService:ProfileService,
private authService:AuthService,
private formBuilder:FormBuilder,
private toastrService:ToastrService
) { }
ngOnInit(): void {
this.getUserById();
this.createProfileForm();
this.createPasswordForm();
}
createProfileForm(){
this.profileForm = this.formBuilder.group({
id:[Number(this.authService.getCurrentUserId)],
firstName: ["",Validators.required],
lastName:["",Validators.required]
})
}
createPasswordForm(){
this.passwordForm = this.formBuilder.group({
userId:[Number(this.authService.getCurrentUserId)],
oldPassword: ["",Validators.required],
newPassword:["",Validators.required],
repeatNewPassword:["",Validators.required]
})
}
getUserById(){
this.userService.getUserById(this.authService.getCurrentUserId)
.subscribe(response=>{
this.user = response.data
this.dataLoaded = true
});
}
updateUserNames(){
if (this.profileForm.valid) {
let userModel = Object.assign({}, this.profileForm.value);
this.userService.updateUserNames(userModel).subscribe(response=>{
this.toastrService.info(response.message, "Bilgiler Güncellendi.");
setTimeout(() => {
window.location.reload();
}, 1000);
}, responseError=>{
console.log(responseError);
this.toastrService.error(responseError.error, "Hata!");
});
} else {
this.toastrService.error("Lütfen tüm alanları doldurunuz.", "Hata!");
}
}
updatePassword(){
if (this.passwordForm.valid) {
let passwordModel = Object.assign({}, this.passwordForm.value);
console.log(passwordModel);
this.authService.updatePassword(passwordModel).subscribe(response=>{
this.toastrService.info(response.message, "Şifre Güncellendi");
}, responseError=>{
this.toastrService.error(responseError.error, "Hata!");
});
} else {
this.toastrService.error("Lütfen tüm alanları doldurunuz.", "Hata!");
}
}
}
How can I fix this error? Thanks. I tried lots of thins, but no-one helped me.
I am trying to add a user's profile updater. But this error...

As the error says; Unexpected token 'e', "eyJhbGciOi"... is not valid JSON. You are trying to parse a plain string represents token itself, not a valid string represents a json object.. Therefore it fails when trying to parse it.
Either update the code where you directly store your token as string on your local storage or just use localStorage.getItem('token') without parsing.

error TS2559: Type 'BookInterface[]' has no properties in common with type 'BookInterface'

Dear I am developing a page with Angular 7 and I am presented with the error TS2559: Type 'BookInterface[]' has no properties in common with type 'BookInterface', I have changed the code but I still can not find the solution, I leave the code below, the error is thrown in the method getListBooks(): this is my file list-books.component.ts
import { BookInterface } from './../../../models/book';
import { DataApiService } from './../../../services/data-api.service';
import { Component, OnInit } from '#angular/core';
import {NgForm} from '#angular/forms';
#Component({
selector: 'app-list-book',
templateUrl: './list-book.component.html',
styleUrls: ['./list-book.component.css']
})
export class ListBookComponent implements OnInit {
constructor(private dataApi: DataApiService) { }
private books: BookInterface = {};
ngOnInit() {
this.getListBooks();
}
getListBooks() {
this.dataApi.getAllBooks().subscribe(books => {
this.books = books;
});
}
onDelete() {
console.log('LIBRO ELIMINADO');
}
}
I also leave the code of my data-api.service.ts from where I call the interface
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs/internal/Observable';
import { Injectable } from '#angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '#angular/fire/firestore';
import { BookInterface } from '../models/book';
#Injectable({
providedIn: 'root'
})
export class DataApiService {
constructor(private afs: AngularFirestore) {
this.bookCollecction = afs.collection<BookInterface>('books');
this.books = this.bookCollecction.valueChanges();
}
private bookCollecction: AngularFirestoreCollection<BookInterface>;
private books: Observable<BookInterface[]>;
private bookDoc: AngularFirestoreDocument<BookInterface>;
private book: Observable<BookInterface>;
getAllBooks() {
return this.books = this.bookCollecction.snapshotChanges()
.pipe(map( changes => {
return changes.map( action => {
const data = action.payload.doc.data() as BookInterface;
data.id = action.payload.doc.id;
return data;
});
}));
}
// metodo que trae un libro a traves de su id
getOneBook(idBook: string) {
this.bookDoc = this.afs.doc<BookInterface>(`books/${idBook}`);
return this.book = this.bookDoc.snapshotChanges().pipe(map(action => {
if (action.payload.exists === false){
return null;
} else {
const data = action.payload.data() as BookInterface;
data.id = action.payload.id;
return data;
}
}));
}
addBook(book: BookInterface): void {
this.bookCollecction.add(book);
}
updateBook(book: BookInterface): void {
let idBook = book.id;
this.bookDoc = this.afs.doc<BookInterface>(`books/${idBook}`);
this.bookDoc.update(book);
}
deleteBook(idBook: string): void {
this.bookDoc = this.afs.doc<BookInterface>(`books/${idBook}`);
this.bookDoc.delete();
}
}
The version of typescript that I am currently using is Version 2.7.2, but also update it without solving the problem

You need to change the following:
private books: BookInterface = {};
to:
private books: BookInterface[] = [];

Initialize a TypeScript object from JSON object using .map complains myclass.myFunction is not a function

This code throws an error in the method of "populateGridRows()", at the line of “row.setCompuetedProperties();”. The error message is – “ERROR TypeError: row.setCompuetedProperties is not a function”.
I can see all the properties (with data) on the “row” object in the console just before I get the error.
As far as I can understand it is all about mapping the JSON data coming from the server into a class. Please let me know where I have made a mistake. Thanks.
delivery-plan.component.ts
import { Component, OnInit, ViewChild, ViewEncapsulation } from "#angular/core";
import { ActivatedRoute } from "#angular/router";
import { DetailRow, ExcelExportProperties, FilterSettingsModel, Grid, GridComponent, GridLine, PdfExportProperties } from "#syncfusion/ej2-ng-grids";
import { ClickEventArgs } from '#syncfusion/ej2-ng-navigations';
import { UtilService } from "../../../shared/services/util.service";
import { ConditionBasedMaintenanceStatusEnum } from "../../enums";
import { ConditionAssessmentService, IConditionBasedMaintenanceRowModel } from "../../services/conditionassessment.service";
import { DeliveryPlanModel, DeliveryPlanService, IDeliveryPlanModel } from "../../services/delivery-plan.service";
#Component({
encapsulation: ViewEncapsulation.None,
selector: 'app-delivery-plan',
templateUrl: './delivery-plan.component.html',
styleUrls: ['./delivery-plan.component.scss']
})
export class DeliveryplanComponent implements OnInit {
schoolNumber: number;
deliveryPlanItems: DeliveryPlanModel[];
componentVariables: ConditionAssessmentComponentVariables;
gridRows: Array<DeliveryPlanModel>;
#ViewChild("deliveryItemsGrid") deliveryItemsGrid: GridComponent;
progressValue1 = 100;
progressValue2 = 62;
clickedYear = null;
constructor(private route: ActivatedRoute, private svcConditionAssessment: ConditionAssessmentService,
private svcUtil: UtilService, private deliveryPlanService: DeliveryPlanService) {
this.componentVariables = new ConditionAssessmentComponentVariables();
this.gridRows = new Array<DeliveryPlanModel>();
}
ngOnInit() {
this.route.parent.params.subscribe(params => {
this.schoolNumber = parseInt(params["id"]);
});
Grid.Inject(DetailRow);
this.getDeliveryPlanItems();
}
public getDeliveryPlanItems() {
this.deliveryPlanService
.getDeliveryPlanItems(this.schoolNumber.toString()).subscribe(
data => {
if (data) {
this.deliveryPlanItems = data;
this.populateGridRows();
}
}
)
}
public populateGridRows(): void {
if (this.deliveryPlanItems && this.deliveryPlanItems.length) {
for (var i = 0; i < this.deliveryPlanItems.length; i++) {
let row = this.deliveryPlanItems[i];
console.log(row);
row.setCompuetedProperties(); // The Error is associated with this line
this.gridRows.push(row);
}
}
}
delivery-plan.service.ts
import { HttpClient, HttpHeaders, HttpParams } from "#angular/common/http";
import { Injectable } from "#angular/core";
import { Router } from '#angular/router';
import { Observable, Operator } from "rxjs";
import { ErrorsService } from "../../shared/services/errors.service";
import { ConditionBasedMaintenanceStatusEnum } from "../enums";
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
export interface IDeliveryPlanModel {
//Props
type: string;
id: number;
buildingName: string;
location: string;
asset: string;
element: string;
subElement: string;
description: string;
trade: string;
status: number;
statusDisplay: string;
plannedDate: Date;
completedDate: Date;
deferred: boolean;
// methods
setCompuetedProperties(): void;
}
export class DeliveryPlanModel implements IDeliveryPlanModel {
//Props
type: string = null;
id: number = null;
buildingName: string = null;
location: string = null;
asset: string = null;
element: string = null;
subElement: string = null;
description: string = null;
trade: string = null;
status: number = null;
statusDisplay: string = null;
plannedDate: Date = null;
completedDate: Date = null;
deferred: boolean = null;
color: string = null;
// methods
public setCompuetedProperties(): void {
switch (this.status) {
case ConditionBasedMaintenanceStatusEnum.AddedToPlanner:
this.statusDisplay = "Planned";
break;
case ConditionBasedMaintenanceStatusEnum.Deferred:
this.statusDisplay = "Deferred";
break;
case ConditionBasedMaintenanceStatusEnum.Completed:
this.statusDisplay = "Completed";
break;
}
}
}
#Injectable()
export class DeliveryPlanService {
routePrefix: string = "api/deliveryplans";
constructor(private http: HttpClient, private router: Router, private errorsService: ErrorsService) { }
public getDeliveryPlanItems(schoolId: string): Observable<DeliveryPlanModel[]> {
var list = this.http.get<DeliveryPlanModel[]>(this.routePrefix + "/schools/" + schoolId)
.map<DeliveryPlanModel[], DeliveryPlanModel[]>(items => {
return items;
}).catch(error => this.errorsService.handleError(error));
return list;
}
}

Shared service example Angular 5

I know this question has been asked several times, but problem is that nobody tried to make a some fiddle or show results of code. This is what i have, i need to update values in other component based on value in some other component, but that is not just value,I have call function again in some other component.
I have some component that goes to database and update values, on second hand I have other component that read those values from database from service.
This is example of my code
tasks.service.ts
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { environment } from '../../environments/environment';
import { Tasks } from './tasks';
#Injectable()
export class TasksProvider {
constructor(private http: HttpClient) { }
createNewTask(name: Name) : Observable<any> {
return this.http.post(environment.apiUri + 'tasks', { name, finished: false },
{ responseType: 'text' });
}
updateTask(id: Id, name: Name, finished: boolean) : Observable<any> {
return this.http.put(environment.apiUri + 'tasks/' + id, { name, finished },
{ responseType: 'text' });
}
getAllTasks(): Observable<Tasks[]> {
return this.http.get(environment.apiUri + 'tasks')
.map<any, Tasks[]>(data => data.map(Tasks.fromObject));
}
}
app.component.html
<app-tasks-list></app-tasks-list>
<app-tasks-add-new></app-tasks-add-new>
As you may see I have not child components, that is my main problem
tasks-list.component.ts
import {Component} from '#angular/core';
import { Tasks } from '../services/tasks';
import { TasksProvider } from '../services/tasks.service';
#Component({
selector: 'app-tasks-list',
templateUrl: './tasks-list.component.html',
styleUrls: ['./tasks-list.component.scss']
})
export class TasksListComponent {
tasks: Array<Tasks>;
constructor(private tasksProvider: TasksProvider) { }
ngOnInit() {
this.getTasksList();
}
displayedColumns: string[] = ['id', 'name', 'finished'];
private getTasksList() {
this.tasksProvider.getAllTasks()
.subscribe(tasks => {
this.tasks = tasks;
});
}
public updateCheckboxValue(id: number, name: string, event: any){
this.tasksProvider.updateTask(id, name, event.checked).subscribe(
result => {},
() => {
alert('Something went wrong');
})
}
}
tasks-add-new.component.ts
import { Component, OnInit, Inject } from '#angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '#angular/material';
import { Tasks } from '../services/tasks';
import { TasksProvider } from '../services/tasks.service';
export interface DialogData {
name: string;
}
#Component({
selector: 'app-tasks-add-new',
templateUrl: './tasks-add-new.component.html',
styleUrls: ['./tasks-add-new.component.scss']
})
export class TasksAddNewComponent implements OnInit {
ngOnInit() {
}
constructor(public dialog: MatDialog, private tasksProvider: TasksProvider) {}
openDialog(): void {
const dialogRef = this.dialog.open(TasksAddNewDialog, {
width: '250px',
data: {name: this.animal}
});
dialogRef.afterClosed().subscribe(result => {
this.name = result
this.tasksProvider.createNewTask(this.name).subscribe(
result => {},
() => {
alert('Something went wrong');
})
}
}
}
#Component({
selector: 'tasks-add-new-dialog',
templateUrl: 'tasks-add-new-dialog.html'
})
export class TasksAddNewDialog {
constructor(
public dialogRef: MatDialogRef<TasksAddNewDialog>,
#Inject(MAT_DIALOG_DATA) public data: DialogData) {}
onNoClick(): void {
this.dialogRef.close();
}
}
You see now when i call function in tasks-add-new.component.ts like
this.tasksProvider.createNewTask(this.name).subscribe(
result => {},
() => {
alert('Something went wrong');
})
I need to call again function in tasks-list.component.ts
private getTasksList() {
this.tasksProvider.getAllTasks()
.subscribe(tasks => {
this.tasks = tasks;
});
}
Does any body have idea how i can do that the best practice?

On of the possible approach is to use Subjects.
1) Store task list on the service and provide subscribable Subject
private tasks: Array<Task>;
public $tasks: BehaviorSubject<Array<Task>>;
constructor(private http: HttpClient) {
this.$tasks = new BehaviorSubject([]);
...
}
getAllTasks() {
this.http.get(environment.apiUri + 'tasks')
.subscribe(data => {
this.tasks = data;
this.$tasks.next(this.tasks);
});
}
updateTask(params) {
this.http.post(/* params */).subscribe((task) => {
this.tasks = this.tasks.map(t => t.id !== task.id ? t : task);
this.$tasks.next(this.tasks);
});
}
createTask(...) {
// again, do a request, update this.tasks and call $tasks.next
...
}
2) Make one service Subject subscription on the component instead of multiple service methods Observable listeners and update component's list automatically each time the service source has been changed
tasks: Array<Tasks>;
constructor(private tasksProvider: TasksProvider) {
this.tasksProvider.$tasks.subscribe(tasks => this.tasks = tasks);
}
ngOnInit() {
this.tasksProvider.getAllTasks();
}
public updateCheckboxValue(id: number, name: string, event: any){
this.tasksProvider.updateTask(id, name, event.checked);
}

Need help accessing variable from Service in Angular 2

Passing the URL id from the last page a user was on to a service that I can reference in a dialog.
issuer.service.ts
import { Injectable, EventEmitter } from '#angular/core';
import { Observable, of } from 'rxjs';
import { BehaviorSubject } from 'rxjs';
#Injectable()
export class IssuerService {
private urlidSource = new BehaviorSubject<string>('');
currentUrlid = this.urlidSource.asObservable();
public onChange: EventEmitter<string> = new EventEmitter<string>();
constructor () {
}
changeUrlid(urlid: string) {
this.currentUrlid = of(urlid);
this.onChange.emit(urlid);
}
getUrlid(currentUrlid: string) {
return this.currentUrlid;
}
}
Page that has the URL id I want (dashboard.component.ts)
import { IssuerService } from './../../issuer.service';
import { ActivatedRoute } from '#angular/router';
import { Router } from '#angular/router';
urlid: string;
constructor(
private route: ActivatedRoute,
private router: Router,
private issuerService: IssuerService,
public dialog: MatDialog
) {}
newUrlid() {
this.issuerService.changeUrlid(this.route.snapshot.paramMap.get('id'));
console.log(this.urlid);
}
ngOnInit() {
// Get URL ID
this.issuerService.onChange.subscribe(urlid => this.urlid = urlid);
this.newUrlid();
}
Component I want to read the value in:
import { ActivatedRoute } from '#angular/router';
import { Router } from '#angular/router';
import { IssuerService } from './../../issuer.service';
urlid: string;
constructor(
private route: ActivatedRoute,
private router: Router,
private issuerService: IssuerService,
public dialog: MatDialog
) {}
ngOnInit() {
this.issuerService.onChange.subscribe(urlid => {
this.urlid = urlid;
console.log(this.urlid);
});
}
So currently when I visit my dashboard page it will display the value of 2 which is correct. My goal is that when a user visits any page I can read this value of 2. How can I access this value? The above code works and my Header displays 2 but only when on the dashboard page. I need it to display 2 no matter what page the user is on.

you can see this example, and It's modified list:
use queryPamas to get query string, not params (DashboardComponent)
use ReplaySubject(1) to return the last urlId; it's don't have a default value, just return prev one value (IssuerService)
get observable from getUrlid and subscribe it in components that want to show url id
export class IssuerService {
private urlidSource = new ReplaySubject<string>(1);
constructor() {
}
changeUrlid(urlid: string) {
this.urlidSource.next(urlid);
}
getUrlid() {
return this.urlidSource;
}
}
export class DashboardComponent implements OnInit {
urlid: string;
constructor(
// private route: ActivatedRoute,
private router: Router,
private issuerService: IssuerService,
// public dialog: MatDialog
) { }
newUrlid() {
// Get URL ID
this.route.queryParams.subscribe((queryParam) => {
const id = queryParam['id'];
if (!id) {
return;
}
this.issuerService.changeUrlid(id);
});
}
ngOnInit() {
this.newUrlid();
this.issuerService.getUrlid().subscribe(urlid => {
this.urlid = urlid;
});
}
}
export class HelloComponent implements OnInit {
urlid;
constructor(
private issuerService: IssuerService
) { }
ngOnInit() {
this.issuerService.getUrlid().subscribe(urlid => {
this.urlid = urlid;
});
}
}

You do not need a parameter for your get Method since you already have the value inside the service,
getUrlid() {
return this.currentUrlid;
}
and you can use retrieve the value in the 2nd component as follows,
this.issuerService.currentUrlid.subscribe((value: string) => {
this.urlid = value;
}