Identifying object ID in JSON by using object property In angular - json

Question

I'm working on simple book management app. When user clicks on "Add to favorites, That book will be added to favorites page. Up to now, I have build start page, login page, and register page. I'm using JSON as a database (books.json and users.json) and using JSON-server to host the data. Here my Question is, When the new user is created, How to create Empty Wishlist automatically? And based on Mail id, how to get Id of that object? I have tried some methods in YouTube and documentation. but I was failed.
user.json
[
{
"id": 1,
"userName":"Deepak Sharma",
"Password":"dep#123!",
"Phone":"9988776655",
"Email":"Deepak#gmail.com",
"UserType":"Customer",
"WishList": [1,2,3],
"Completed":[4,5,6]
},
{
"username": "test1",
"Password": "test1",
"Phone": 123456,
"Email": "test1#gmail.com",
"id": 2
}
]
login-page.component.ts
import { HttpClient } from '#angular/common/http';
import { Component, OnInit } from '#angular/core';
import { FormBuilder, FormGroup, Validators } from '#angular/forms';
import { Router } from '#angular/router';
#Component({
selector: 'app-login-page',
templateUrl: './login-page.component.html',
styleUrls: ['./login-page.component.css']
})
export class LoginPageComponent implements OnInit {
public loginForm!: FormGroup;
constructor(private formBuilder : FormBuilder, private http: HttpClient, private router: Router) { }
ngOnInit(): void {
this.loginForm = this.formBuilder.group({
Email: ['', Validators.required],
Password: ['', Validators.required]
})
}
login(){
this.http.get<any>("http://localhost:3500/Users")
.subscribe(res=>{
const user = res.find((a:any) =>{
return a.email === this.loginForm.value.email && a.password === this.loginForm.value.password
});
if (user) {
alert("Login Success!");
this.loginForm.reset();
this.router.navigate(['user'])
} else {
alert("User Not found. Create account !!");
}
}, err=>{
alert("Something Went Wrong");
})
}
}
and here is the code favorite-page.component.ts
import { Component, OnInit, ViewChild } from '#angular/core';
import { LoginPageComponent } from '../login-page/login-page.component';
#Component({
selector: 'app-favourite-page',
templateUrl: './favourite-page.component.html',
styleUrls: ['./favourite-page.component.css']
})
export class FavouritePageComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

Answer 1

You can create a wish list with a format of your liking inside the function where you create the new user. The format can be JSON, a temporary array or an insert into a database.
I can also see that you're using a deprecated calling method of subscribe. Consider checking out the tutorials & documentation of Angular, rxjs an ngrx.