javascript - Can't Write Query Parameter to the Database

Question

This isn't writing to the database.

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    const itemsRef = this.db.list('cart_checkouts');
    itemsRef.push({checkoutProductName : this.product_name });
  });
}

I get the error:

Error: Reference.push failed: first argument contains undefined in property 'cart_checkouts.checkoutProductName'

The query parameters are:

id, thumbnail, quantity, product_name, product_price

so product_name should be available to write to the database.

When I write

itemsRef.push({checkoutProductName : "Helmet" });

It saves "Helmet" to the database so I know that the error is in this.product_name.

I have a form that sends the query parameters like this:

<form [formGroup]="submitForm" (ngSubmit)="checkOut(items)">
<input type="submit" value="Check Out">
</form>

public checkOut(items: any)  {
{ this.router.navigate(['check-out'], { queryParams: { checkouts: JSON.stringify(this.items) } });

and when I write this:

itemsRef.push({checkoutProductName :  params['checkouts'] });

It gets the entire array of checkout items and saves it to checkoutProductName.

The query parameters in the url field look like this:

http://localhost:4200/check-out?checkouts=%5B%7B%22id%22:1,%22thumbnail%22:%22product-2.gif%22,%22quantity%22:2,%22product_name%22:%22Adult%20Female%20Bike%22,%22product_price%22:20.5%7D,%7B%22id%22:3

But instead of %22, there are quotation marks.

I debugged like this:

console.log("params " + params);
console.log("this.checkouts " + this.checkouts);
console.log("this.items HERE " + this.items);
console.log("params.checkouts " + params.checkouts);
const item = JSON.parse(params.checkouts);
console.log("item.product_name " + item.product_name);
console.log("params checkouts product_name " + params.checkouts["product_name"]);

and the console log returned:

params [object Object]
this.checkouts undefined
this.items HERE undefined
params.checkouts [{"id":1,"thumbnail":"product-2.gif","quantity":2,"product_name":"Adult Female Bike","product_price":20.5},{"id":3,"thumbnail":"product-4.gif","quantity":3,"product_name":"Adult Unisex Helmet","product_price":4}]
item.product_name undefined
params checkouts product_name undefined

Answer 1

You can't loop over a command like this.router.navigate. This command takes you from one page to another, so what it actually does is navigating to checkout page once - with the last one in the loop - with the last item.

Since it's a list of items that you go to checkout with, it can't be transported in the URL. The list needs to be saved somewhere in memory, where the shopping cart page fills it up with the items, and the checkout page reads from it and pushes each item to the database.

To do that you need to make the following changes:

crud-service.ts

export class CrudService {
  checkoutItems: any[] = [];

  constructor(

Add the line checkoutItems: any[] = []; This is where the list is saved for both pages.

shopping-cart.component.ts

public async checkOut(items: any)  {
    console.log("ITEMS", items);
    this.crudService.checkoutItems = items;
    await this.router.navigate(['check-out']);
  }

This is all checkOut method should do (copy and paste over you existing code). Notice how it saves the items in the memory where other pages can read from too.

check-out.component.ts

ngOnInit() {
  ...
  const itemsRef = this.db.list('cart_checkouts');

  this.crudService.checkoutItems
    .forEach(item => itemsRef.push(
      {
        checkoutProductName: item.product_name,
        checkoutThumbnail: item.thumbnail,
        checkoutQuantity: item.quantity,
        checkoutProductPrice: item.product_price
      }));
  }

Copy all of ngOnInit and paste over your code. What's important here is the last part that reads from the list in memory and adds each item to the database. I removed the section that parses the URL because the list is not passed with the URL. The rest of ngOnInit stays the same - I show all of it to make it easier for you to copy and paste.