How To Add New Field in Existing JSON Object Using Angular 10 - html

Question

Hello I’m trying to add a new field (property) to existing json.db object based on a radio button click.
I think this is the best approach because the application has more than one product and some of them don’t have sizes and the other product are using the same model (product) I also don’t want to add a size because the sizes change based on the user clicking on a radio button s , m or l.
Products are being loaded to page from an api which works fine. The issue is when this particular product is added to cart it has to have a size. I am able to get the size value when clicking on one of the radio buttons. My cart component is not a parent or child of the product component
(product-item) to get the size value to be used in the cart I used a BehaviorSubject and I m able to get the size value. What I want to do is when the user click the radio for size and then click add to cart I need to add a field called size into cart object along with the value size to my existing json file.
Right now when add to cart it looks just like Product object. So my approach is to add to the object something like cart.size =sizeValue. object property value. I’m not sure how to accomplish this. Tried of couple of things with no luck. If someone can please point me in the right direction I would be so grateful.
Thanking You in Advance.
json file products object
"products": [
{
"id": 1,
"name": "Overalls",
"description": "Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book.",
"imageUrl": "http://localhost:4200/assets/overalls.png",
"price": 250
},
Product model
product.ts
export class Product {
id:number;
name: string;
size: string;
description: string;
price: number;
imageUrl: string;
constructor(id:number, name, description="", size:string, price=0,
imageUrl="" ){
this.id=id
this.name = name
this.description = description
this.price= price
this.size= size
this.imageUrl = imageUrl
}
}
Cart model
cart-item.ts
import { Product } from './product';
export class CartItem {
id: number;
productId: number;
productName: string;
qty: number;
price: number;
size:string;
imageUrl:string;
constructor(id:number, size, product:Product, qty= 1) {
this.id = id;
this.productId = product.id;
this.price = product.price;
this.size = size;
this.productName = product.name;
this.qty = qty;
this.imageUrl = product.imageUrl;
}
}
appservice uses Behavior Subject
appservice.ts
import { Injectable } from '#angular/core';
import { BehaviorSubject } from 'rxjs';
import { FormBuilder, FormGroup, Validators } from '#angular/forms';
#Injectable({
providedIn: 'root'
})
export class AppserviceService {
private data = new BehaviorSubject('');
currentData = this.data.asObservable()
constructor() {
}
updateMessage(item:any){
this.data.next(item);
}
}
cart service
cart.service.ts
#Injectable({
providedIn: 'root'
})
export class CartService {
id: number;
product: any
cartUrl = 'http://localhost:4000/cart';
constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute) {
}
//To do mapping the obtained results out to card items props pipe and mapp functions will be used.
//The observable returneded by carUrl is the source is going to pipe through the map projection anf get results of CartItem
getCartItems(): Observable<CartItem[]> {
return this.http.get<CartItem[]>(cartUrl).pipe(
map((result: any[]) => {
let cartItems: CartItem[] =[];
for(let item of result) {
cartItems.push( new CartItem(item.id, item.size, item.product, item.imageUrl ));
// localStorage.setItem('cartItems',JSON.stringify(cartItems));
sessionStorage.setItem('cartItems',JSON.stringify(cartItems));
}
return cartItems;
})
);
}
addProductToCart(product:Product):Observable<any>{
return this.http.post(cartUrl, {product});
}
}
Product component
product-item.ts
#Component({
selector: 'app-product-item',
templateUrl: './product-item.component.html',
styleUrls: ['./product-item.component.scss']
})
export class ProductItemComponent implements OnInit {
form: FormGroup;
submitted=false;
sizeBy:string;
Valuesize:string;
#Input() productItem:Product
#Input() addedToWishlist: boolean;
//#Input() addedToWishlistitem: boolean = false;
constructor(private msg: MessengerService, private cartService: CartService, private formBuilder: FormBuilder,
private wishlistService:WishlistService, private _wishlistitemService: WishlistItemService,private alertService: AlertService, private _data:AppserviceService) { }
ngOnInit() {
this.form = this.formBuilder.group({
sizeBy: ['', Validators.required]
});
}
// convenience getter for easy access to form fields
get f() { return this.form.controls; }
onSubmit() {
this.submitted = true;
// reset alerts on submit
this.alertService.clear();
// stop here if form is invalid
if (this.form.invalid) {
return;
}
if (!this.form.invalid){
this.Valuesize = this.form.value.sizeBy
this.shareData();
this.handleAddToCart();
}
}
handleAddToCart(){
this.cartService.addProductToCart(this.productItem).subscribe(() =>{
this.msg.sendMsg(this.productItem)
})
}
}
Cart component
cart.component.ts
#Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.scss']
})
export class CartComponent {
Valuesize:string;
#Input() product: CartItem;
#Input() cartItem: CartItem
cartItems = [
];
constructor(private msg: MessengerService, private cartService:CartService, private productService: ProductService, private formBuilder:FormBuilder, private _data:AppserviceService) { }
ngOnInit(): void {
this.handleSubscription();
this.loadCartItems();
this._data.currentData.subscribe(currentData => this.Valuesize = currentData)
}
handleSubscription(){
this.msg.getMsg().subscribe((product: Product) => { //This is an obsevable
this.loadCartItems();
})
}
loadCartItems(){
this.cartService.getCartItems().subscribe((items: CartItem[]) => {
this.cartItems = items;
})
}
}
HTML
product-item.component.html
<div class="col-sm-12">
<p class="float-left" style="text-align:left; margin-left:-2px;
width:140px;">{{productItem.name}}</p>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="float-left form-check" style="font-size:11px; text-
align:left; margin-left: -25px; width:200px">Size:
<alert></alert>
<label class="form-check-label checkbox-inline" for="sizeBy"
style="padding: 4px">
<input type="radio" name="sizeBy" formControlName="sizeBy"
id="small" [ngClass]=f.sizeBy value="S" required >
S</label>
<label class="form-check-label checkbox-inline" for="sizeBy" style="padding: 4px">
<input type="radio" name="sizeBy" formControlName="sizeBy" id="medium" [ngClass]=f.sizeBy value="M" required >
M</label>
<label class="form-check-label checkbox-inline" for="sizeBy" style="padding: 4px">
<input type="radio" name="sizeBy" formControlName="sizeBy" id="large" [ngClass]=f.sizeBy value="L" required>
L</label>
<div *ngIf="f.sizeBy.errors?.required"><b>You Must Coose A</b></div>
<div class="-flex justify-content-between align-items-left">
<div class="btn-group">
<button type="submit" style="border:0; outline:0; background-
color:transparent; padding-bottom: 100px; margin-left: -13px">
<img src="assets/shopping_cart_outline001.png" style="background-
color:none; color:#D30169; font-size:5px; cursor:pointer;
outline:none; outline:0; border:0"></button>
</div>
</div>
</div>
</form>