menu

Questions & Answers

Can not get property value from a column from another entity, Angular, Typescript, Java Spring

I am learning Angular and writing a simple pet-project(internet-shop) using Java Spring for the backend and Angular for UI.

I have the following DB structure:

Producer table: producer table

Product table:product table

Product entity:

`
@Entity
@Table(name="product")
@Data
public class Product {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "id")
private Long id;

@ManyToOne
@JoinColumn(name = "category_id", nullable = false)
private ProductCategory category;

@Column(name = "sku")
private String sku;

@Column(name = "name")
private String name;

@Column(name = "description")
private String description;

@Column(name = "unit_price")
private BigDecimal unitPrice;

@Column(name = "image_url")
private String imageUrl;

@Column(name = "active")
private boolean active;

@Column(name = "units_in_stock")
private int unitsInStock;

@Column(name = "date_created")
@CreationTimestamp
private Date dateCreated;

@Column(name = "last_updated")
@UpdateTimestamp
private Date lastUpdated;

@ManyToOne(cascade = CascadeType.ALL)
@JoinColumn(name = "producer_id")
private Producer producer;`

Producer entity:

`@Entity
@Table(name="producer")
@Getter
@Setter
public class Producer {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name="id")
private Long id;

@Column(name="first_name")
private String firstName;

@Column(name="last_name")
private String lastName;

@Column(name="email")
private String email;

@OneToMany(mappedBy = "producer")
@JsonIgnore
private List<Product> products;


@ManyToOne(cascade = CascadeType.ALL)
@JoinColumn(name = "delivery_id")
private Delivery delivery;

`

TypeScript class for Product:

`import { Producer } from "./producer";

export class Product {

constructor(public id: string,
            public sku: string,
            public name: string,
            public description: string,
            public unitPrice: number,
            public imageUrl: string,
            public active: boolean,
            public unitsInStock: number,
            public dateCreated: Date,
            public lastUpdated: Date,
            public producerId: Producer['id']
    ) {
}
}`

and for Producer:

`export class Producer {

constructor (public id: number,
    public firstName: string,
    public lastName: string,
    public email: string) { }
 }

` and for CartItem:

import { Product } from './product';

export class CartItem {

id: string;
name: string;
imageUrl: string;
unitPrice: number;
producerId: number;

quantity: number;

constructor(product: Product) {
    this.id = product.id;
    this.name = product.name;
    this.imageUrl = product.imageUrl;
    this.unitPrice = product.unitPrice;
    this.producerId = product.producerId;

    this.quantity = 1;
}

}

Adding to cart logic:

 addToCart(theCartItem: CartItem) {

    // check if we already have the item in our cart
    let alreadyExistsInCart: boolean = false; 
    let existingCartItem: CartItem = undefined;

    if (this.cartItems.length > 0) {
      // find the item in the cart based on item id

      existingCartItem = this.cartItems.find( tempCartItem => tempCartItem.id === theCartItem.id );

      // check if we found it
      alreadyExistsInCart = (existingCartItem != undefined);
    }


    if (alreadyExistsInCart) {
      // increment the quantity
      existingCartItem.quantity++;
      
    }
    else {
      // just add the item to the array
      this.cartItems.push(theCartItem);
    
    }

    // compute cart total price and total quantity
    this.computeCartTotals();
  }

  computeCartTotals() {

    let totalPriceValue: number = 0;
    let totalQuantityValue: number = 0;

    for (let currentCartItem of this.cartItems) {
      totalPriceValue += currentCartItem.quantity * currentCartItem.unitPrice;
      totalQuantityValue += currentCartItem.quantity;
    }


    // publish the new values ... all subscribers will receive the new data
    this.totalPrice.next(totalPriceValue);
    this.totalQuantity.next(totalQuantityValue);

    // log cart data just for debugging purposes
    this.logCartData(totalPriceValue, totalQuantityValue);
  }

  logCartData(totalPriceValue: number, totalQuantityValue: number) {

    console.log('Contents of the cart');
    for (let tempCartItem of this.cartItems) {

    /*  this.handleProducerDetails(tempCartItem.id);
      this.producers.push(this.producer);
      console.log(`Added producer: ${this.producer.firstName}`);*/

      const subTotalPrice = tempCartItem.quantity * tempCartItem.unitPrice;
      console.log(`name: ${tempCartItem.name}, quantity=${tempCartItem.quantity}, 
      unitPrice=${tempCartItem.unitPrice}, subTotalPrice=${subTotalPrice}, producerId=${tempCartItem.producerId}`);
    }

When I am adding an item to the cart, the logic I wrote sees al fields of my item, except producer_id (=undefined). See the console pic: updefined producer id

I am thinking now I made a mistake in the models class from UI side creation, but got stuck, where is this issue.

UPD: when I debug, I am getting undefined here, so I understand it like an issue is somewhere in the models? enter image description here

I want to get a correct value from the database to be sent on UI side.

Comments:
2023-01-23 17:42:03
Have you confirmed that the id is actually being sent from the BE. Seems odd that all other values work besides the id.
2023-01-23 17:42:03
@Levidps when I review a product from BE, it sees the info about producer: "localhost:8080/api/products{productId}/producer" I can get an info from BE about my producer linked to this product.
Answers(0) :