api endpoint returns response 404 - Angular

Question

I have method to save image. Initial this.educationalData gives back data in console.log but after that when i try to get id from endpoint. It gives me undefined.

UPDATED
it is now sending id of 1 but still respond of 404

saveImage() {
  const file = this.imageChangedEvent;
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () = >{
    this.apiService.postData('educational-award/' + this.educationalData[0].id, {
      "photo": reader.result,
      "id": this.educationalData[0].id
    }).subscribe(data = >{
      console.log('test')
    });
  };
}

UPDATE (latest)
I found out i was using the wrong endpoint. Im sorry for causing trouble to everyone.

Route::post('/upload-picture', [UserController::class, 'uploadPicture']);

Screenshot to give more clarity

UPDATED

could you please add an image after opening the arrow of `educationalData` in the console to see the data inside — Merna Mustafa, Jul 28 '22 at 08:50
try `this.educationalData[0].id` or `this.educationalData[0]["id"]` — Merna Mustafa, Jul 28 '22 at 09:09

Mohamad Jamil · Answer 1 · 2022-07-28T09:02:42.693

When you build your backend route like this

Route::post('/educational-award/{educational_background}',...)

you have to put the {educational_background} parameter directly inside the url string and not as a payload parameter. In your case you are passing the id as a payload parameter.

Why you are getting an undefined for id, that depends on your educationalData object and how the data is constructed in it.
Update, After I have seen your educationalData it seems that you have an array. So to get the id use this.educationalData [0].id .

In your saveImage function use it like this :

reader.onload = () = >{
this.apiService.postData('educational-award/'+this.educationalData[0].id, {
  "photo": reader.result,
  "id": this.educationalData.id
}).subscribe(data = >{
  console.log('test')
});

Thanks this gives me id of 1. But im still getting 404 probably my ```this.apiService.postData``` is the problem — Kael, Jul 28 '22 at 09:21

eol · Answer 2 · 2022-07-28T09:28:36.783

1

The post-endpoint expects a path-param {educational_background}. You need to populate it on the client-side:

this.apiService.postData('educational-award/'+this.educationalData[0].id, {
  "photo": reader.result,
  "id": this.educationalData[0].id
}).subscribe(data = >{
  console.log('test')
});

edited Jul 28 '22 at 09:28

answered Jul 28 '22 at 08:46

eol

23,236
5
46
64

yes im passing ```"id": this.educationalData.id``` but i can't get the data because its undefined. That's why post endpoint gives back 404 – Kael Jul 28 '22 at 08:49
You need to pass it as a path-param as well, not only in the body. – eol Jul 28 '22 at 09:29
yes i've updated it and copied according to your answer. the payload sends id of 1 and photo but it response to 404 still – Kael Jul 28 '22 at 09:33
Hm, can you add the server-side code? What does `createEducationalAward` do? – eol Jul 28 '22 at 09:35

onoffon · Answer 3 · 2022-07-29T02:19:41.510

1

Param {educational_background} is missing

this.apiService.postData('educational-award/' + this.educationalData.id, {

edited Jul 29 '22 at 02:19

answered Jul 28 '22 at 09:18

onoffon

93
10

api endpoint returns response 404 - Angular

3 Answers3