Data does not update second time

@paskalnikita wrote:

I have page: I write down products list -> send it to endpoint -> received data I am showing at the same page and on second one.

search.page.ts

// From this page I send request. 
// this.cartService.setProducts(data['cart']); <- I am applying data to another page
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CartService } from '../cart.service';


@Component({
  selector: 'app-search',
  templateUrl: 'search.page.html',
  styleUrls: ['search.page.scss']
})
export class SearchPage {

  constructor(public http: HttpClient, private cartService: CartService ) { }

  product_name: string;
  products_list = [];

  add(){
    if (this.product_name != undefined){
      if (this.product_name.replace(/\s/g, '').length) {
        this.products_list.push(this.product_name);
        this.product_name = undefined;
      }
    }

  }

  delete(index){
    if(index > -1){
      this.products_list.splice(index, 1);
    }
  }

  result_products = [];
  total_price_per_shop = [];

  search(){
    this.result_products = [];
    var url = this.generate_url(this.products_list);

    this.http.get(url).subscribe(data=>{
      for(var i=0; i < data['products'].length; i++){
        this.result_products.push(data['products'][i]);
      }

      this.cartService.setProducts(data['cart']); // LOOK HERE
      this.products_list = [];
      });
  }


  generate_url(products_list) {
    var url = 'http://localhost:5000/products/';
    for(var i=0; i<products_list.length; i++){
      url += this.products_list[i];
      if (i != this.products_list.length-1){
        url+=',';
      }
    }
    return url
  }

}

I have cart.service.ts

import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root'
})
export class CartService {

  private products_list = [
    {
      product_group: 'Product name 1',
      expanded: true,
      products: [
        { id: 0, shop:'shop1', name: 'Product 1', price: '8' },
        { id: 1, shop:'shop2', name: 'Product 21', price: '2' },
        { id: 2, shop:'shop3', name: 'Product 2', price: '3' },
        { id: 3, shop:'shop4', name: 'Product 4', price: '7' }
      ]
    }
  ];
 
  private cart = [];

  constructor() { }

  setProducts(products){
    this.products_list = products;
  }

  getProducts() {
    return this.products_list;
  }
 
  getCart() {
    return this.cart;
  }
 
  addProduct(product) {
    this.cart.push(product);
  }

  removeProduct(product) {
    this.cart.splice(product);
  }
}

After I send request I got data[‘cart’] written to my cart.service.ts I am opening
select.page.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { CartService } from '../cart.service';

@Component({
  selector: 'app-select',
  templateUrl: 'select.page.html',
  styleUrls: ['select.page.scss']
})
export class SelectPage implements OnInit {

  cart = [];
  products = [];

  sliderConfig = {
    slidesPerView: 1.5,
    spaceBetween: 5,
    centeredSlides: true
  };

  constructor(private router: Router, private cartService: CartService) { }

  ngOnInit() {
    this.products = this.cartService.getProducts(); <- LOOK HERE
    this.cart = this.cartService.getCart();
  }

  addToCart(product) {
    this.cartService.addProduct(product);
  }

  removeFromCart(product) {
    this.cartService.removeProduct(product);
  }
 
  openCart() {
    this.router.navigate(['cart']);
  }
}

So, after data applied to cart.service.ts I am getting it with a help of getProducts();
Here is the problem:
If I made request once data will be written correct. If I am trying to send request second time - data will NOT be written to my select.page.ts and I will have the same products list I made in previous query.

Hope, my explaining is clear, how can I deal with it?
Thank you for any useful information!

Posts: 2

Participants: 2

Read full topic