Angular http GET request after CREATE method does not update Dataset (Whole Table)

Question

Getting data from MySql with simply get Methods works fine on Browser URL every time it gets updated. After some new row has been added, getting the new data with subscribe and observable does not work even on console. It returns the old Dataset. If I call the php script it gives me the currently added rows but on view it does not Update.

Basically my Code comes from this tutorial : https://www.techiediaries.com/php-angular-crud-api-httpclient-forms/. I can add delete data without problem. Reading it seems to be difficult on some Browser (More or less all of them). Only on Edge it will work and update the data after page refresh.

Here is my Service:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Produkt } from  './../app/produkt';
import { Observable } from  'rxjs';
@Injectable({
  providedIn: 'root'
})
export class DataService {
  PHP_API_SERVER = "http://*********.com";
  constructor(private httpClient: HttpClient) {}

  public readProdukts(): Observable<Produkt[]>{
    return this.httpClient.get<Produkt[]>(`${this.PHP_API_SERVER}/read.php`);
  }

  public createProdukt(produkt: Produkt): Observable<Produkt>{
    let tmp = JSON.stringify(produkt);
    return this.httpClient.post<Produkt>(`${this.PHP_API_SERVER}/create.php`, produkt);
  }

...
}

and one of my Components where i call read Service:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../../shared/data.service'
import { Produkt } from 'src/app/produkt';
@Component({
  selector: 'app-inventar',
  templateUrl: './inventar.component.html',
  styleUrls: ['./inventar.component.scss']
})
export class InventarComponent implements OnInit {


  produkt:  Produkt[];
  selectedProdukt:  Produkt  = {
                                id : null , 
                                emri: null, 
                                kosto: null,
                                referenza: null, 
                                corigjine: null,
                                cpakice: null, 
                                cshumice: null,  
                                kondenieri: null, 
                                data: null,
                                ambienti: null,
                                ngjyra: null,
                                materiali: null,
                                sasia: null,
                                llojik: null,
                                kursi: null
                               };

  constructor(private apiService: DataService) {

   }

  ngOnInit() {
  }


  readDB(){
    this.apiService.readProdukts().subscribe((prod: Produkt[])=>{
      this.produkt = prod;
      console.log(this.produkt);
    })
  }

  createOrUpdateProdukt(form){

    if(!this.checkIfEmpty()){
      if(this.selectedProdukt && this.selectedProdukt.id){
        form.value.id = this.selectedProdukt.id;
        this.apiService.updateProdukt(form.value).subscribe((prod: Produkt)=>{
          this.readDB();
          console.log("Product updated" , prod);  
        });
      }
      else{
        form.value.id = null;
        this.apiService.createProdukt(form.value).subscribe((prod: Produkt)=>{
          this.readDB();
          console.log("Productcreated, ", prod);

        });
      }
      alert("Added");

    }else{
        alert("Fill the form");
    }


  }

I need the this.produkt to get updated after I call this.apiService.readProdukts().subscribe(... For many of you it should seem like a duplicate. I mean updating the whole table on HTML does not work. It does after a few tries and I don't get what triggers it. My problem is not updating one single SQL table row. I have tried many similar questions but haven't been able to find a solution that works for me. Thanks in advance

GET.....does not update *whatever* that is very required behavior. — Antoniossss
Thanks for the reply. I mean updating the whole table on HTML does not work. It does after a few tries and I don't get what triggers it. My problem is not updating one single SQL table row. — VisDesign

Megh Megh · Accepted Answer · 2019-07-03T22:52:15

I saw that you are passing selected product but you don't actually set its Id after data processed that's why you are not able to update later instead your function will insert again.

I will suggest you to after insert/update return generated key and set it to your selectedproduct so next time when you call createOrUpdate method it will update instead.

structure improvent: instead of calling readDB() bring effected inserted or updated record and update in your local array that will improve performance as well.

if(this.selectedProdukt && this.selectedProdukt.id){
    form.value.id = this.selectedProdukt.id;
    this.apiService.updateProdukt(form.value).subscribe((prod: Produkt)=>{
      var item = this.produkt.filter(s=>s.id == prod.id);
      Object.assign(item[0], prod);
      console.log("Product updated" , prod);  
    });
  }
  else{
    form.value.id = null;
    this.apiService.createProdukt(form.value).subscribe((prod: Produkt)=>{
      this.produkt.push(prod);
      this.selectedProdukt.id = prod.id;
      console.log("Productcreated, ", prod);

    });
  }

Angular http GET request after CREATE method does not update Dataset (Whole Table)

2 Answers