Updating data without passing id param in URL

Question

I am performing edit operation inside Angular material dialog.I am able to send the data(id and data-key) to dialog.In dialog I'm binding the data that is sent by the component.After binding now I need to edit that prefilled data.I am not able to edit since I don't know how to pass id in API.

Code :

Component.ts :

openModal(id : number, status : string): void {

const dialogRef = this.dialog.open(UpdateRowComponent, 
  {
    data :{
      'id' :id,
      'status': status } 

  });

dialogRef.afterClosed().subscribe((result:string) => {
   console.log('The dialog was closed');
  console.log(result);

});
}

Dialog.component.ts : (Not using services)

  userId:string = "";
   id:number;
   Data:object = {};
 spf = [];
  exist = false;
  productObj:object = {};
  private headers = new Headers({ 'Content-Type': '  application/json'});
  @Input() item: any;

  constructor(private http: Http, public dialogRef :MatDialogRef<UpdateRowComponent >,private dialog: DialogService,private router:Router,private route:ActivatedRoute,
@Inject(MAT_DIALOG_DATA) public data: any) {
 console.log("Outside the subscriber",this.data);
 }

ngOnInit() {
  console.log("Inside update component",this.data);


  this.http.get("http://localhost:4000/Table/").subscribe(
    (res: Response) => {
      this.spf = res.json();
      for(var i = 0; i < this.spf.length ; i++) {
        if(parseInt(this.spf[i].id) === this.id) {
          this.exist = true;
          this.Data = this.spf[i];

          break;
        } else {
          this.exist = false;
        }
      }
    }
  )
}

This is where I'm facing problem(I can't pass id in url so what should I do here ?): dialog.component.ts:

    update(data) {
  this.productObj = {
    "status": data.status
  };
   const url = `${"http://localhost:4000/Table/"}/${this.id}`; 
  this.http.put(url, JSON.stringify(this.productObj), {headers: this.headers})
    .toPromise()
    .then(() => {
    console.log("Updated or ", this.data.status);
    })

}

MonkeyScript · Accepted Answer · 2018-10-23 05:57:37Z

2

First of all, you have to specify a name for the URL parameter which can be 'id' in this case. And try this :

const url = "http://localhost:4000/Table?id="+this.id;

Get ID back from URL in your component by

import { ActivatedRoute } from '@angular/router';
.
.
.
constructor(
    private route : ActivatedRoute,
) {}

ngOnInit() {
    var id : number;
    this.route.queryParams.subscribe( params => {
        id = params['id'];
    })
}

edited Oct 23, 2018 at 5:57

answered Oct 23, 2018 at 5:42

MonkeyScript

5,1611 gold badge14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

kedar kulkarni Over a year ago

Getting this error : ERROR Error: "Uncaught (in promise): Response with status: 404 Not Found for URL: localhost:4000/Table/?id=NaN"

MonkeyScript Over a year ago

Which means you need to get the ID in 'localhost:4200/Table' route right? If so try this const url = "localhost:4000/Table?id="+this.id;

kedar kulkarni Over a year ago

Now I'm getting this error: ERROR Error: "Uncaught (in promise): Response with status: 0 for URL: null" . I am able to pass id through data injection, not through url param

kedar kulkarni Over a year ago

This might help : stackoverflow.com/questions/47501270/…

MonkeyScript Over a year ago

Response with status: 0 error is most probably due to CORS issue (happens when your client and server are in different domains). You can bypass it using a plugin for test purposes. If the issue still remains, it due to a bad request or server being offline.

|

khan Farman · Accepted Answer · 2018-10-23 05:41:10Z

2

try using this

const url = `${"http://localhost:4000/Table/"}+"/"+${this.id}`;

or

const url = "http://localhost:4000/Table/"+this.id;

answered Oct 23, 2018 at 5:41

khan Farman

3663 silver badges11 bronze badges

Collectives™ on Stack Overflow

Updating data without passing id param in URL

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related