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);
    })

}

score 2 · Answer 1 · answered Oct 23 '18 at 05:41

2

try using this

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

or

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

answered Oct 23 '18 at 05:41

khan Farman

346
3
11

MonkeyScript · Accepted Answer · 2018-10-23T05:57:37.997

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 '18 at 05:57

answered Oct 23 '18 at 05:42

MonkeyScript

4,776
1
11
28

Getting this error : ERROR Error: "Uncaught (in promise): Response with status: 404 Not Found for URL: http://localhost:4000/Table/?id=NaN" – kedar kulkarni Oct 23 '18 at 05:44
Which means you need to get the ID in 'localhost:4200/Table' route right? If so try this const url = "http://localhost:4000/Table?id="+this.id; – MonkeyScript Oct 23 '18 at 05:50
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 Oct 23 '18 at 07:26
This might help : https://stackoverflow.com/questions/47501270/uncaught-in-promise-response-with-status-0-for-url-null – kedar kulkarni Oct 23 '18 at 07:30
`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](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi) for test purposes. If the issue still remains, it due to a bad request or **server being offline**. – MonkeyScript Oct 23 '18 at 08:08
Now this error : ERROR Error: Uncaught (in promise): Response with status: 404 Not Found for URL: http://localhost:4000/Table?id=undefined, why am I getting id as undefined? Since I am not passing any id through url.How can I pass id? – kedar kulkarni Oct 23 '18 at 09:36
You are passing it already. That's why it is showing in the URL. But the variable you are passing i.e. `this.id` does not contain any value which is why it is showing _undefined_. The error status 404 states that you don't have a route. Make sure the route to the component is `localhost:4000/Table` – MonkeyScript Oct 23 '18 at 10:08
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/182345/discussion-between-kedar-kulk-and-arcteezy). – kedar kulkarni Oct 23 '18 at 10:23

Updating data without passing id param in URL

2 Answers2