Relacje w Angularze(Error 400 - Bad Request)

Witam,

Jestem tu nowy, więc jeśli naruszę jakiś regulamin albo zachowam się niestosownie, to proszę o wyrozumiałość i z góry przepraszam. Piszę tutaj bo mam problem w projekcie i męczę się z nim już dobre parę dni. Mam dość duży problem z dodaniem danych do tabeli połączonej relacją z bazą Springa. Mianowicie samo dodawanie do tabeli działa bez zarzutu, tylko wtedy gdy nie wybieram niczego z Combo Boxa. Gdy już wybiorę dostaję taki oto komunikat:

zone-evergreen.js:2952 POST http://localhost:4200/api/cars 400 (Bad Request)

HttpErrorResponse {headers: HttpHeaders, status: 400, statusText: "Bad Request", url: "http://localhost:4200/api/cars", ok: false, …}

Mam świadomość, że to problem z linkiem i najprawdopodobniej z relacją, ale nie mam pojęcia jak ten problem rozwiązać.

Moje modele wyglądają tak:

http-cars.model.ts
export class carStatus {
  id: number;
  name: string;
}
 
//carStatus.model.ts (TypeScript)

export class carType {
  id: number;
  name: string;
}
 
//carType.model.ts (TypeScript)

Aby bardziej zrozumieć problem podaje jeszcze serwisy i komponent dodawania pojazdów(jeśli potrzeba więcej plików proszę pisać):

add-dialog1.component.ts

http-cars.service.ts

car-status.service.ts (carType ma identyczny service tylko ze zmienionymi zmiennymi i nazwami)

config.service.ts (wszystkie zawarte funkcje łączą się z linkiem pochodzącym z proxy.conf.json)

{
  "/api": {
    "target": "xxx(link)",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
 
}

No i na końcu jeszcze HTML:

add-dialog1.component.html

Jeśli ktoś ma pomysł dlaczego przy dodawaniu danych bez używania Combo boxa działa ze zarzutu, a jak wybieram coś z tych dwóch combo boxów(czy jednego z nich) to pojawia się powyższy błąd to proszę napiszcie w czym zrobiłem błąd i jak mogę go rozwiązać. (Kumpel z którym robię i jest odpowiedzialny za Springa powiedział, że z jego strony jest wszystko w porządku i jak on wysyła dane przez Postmana to mu wszystko działa. oto przykład zapytania)

Zrób F12 zakładka Network po prawej zakładka headers i zobacz co się fizycznie wysyła do serwera. Zakładam, że korzystasz z Chrome

Pewnie masz niezgodność w danych, które trafiają do metody POST w serwisie.
Zrób console.log(car) w metodzie POST w serwisie i zobacz w konsoli jak wygląda ten obiekt.
Pole "name" w carStatus i carType nie jest czasami pakowane do BODY metody POST?

dawid.wiklo4 napisał(a):

Pewnie masz niezgodność w danych, które trafiają do metody POST w serwisie.
Zrób console.log(car) w metodzie POST w serwisie i zobacz w konsoli jak wygląda ten obiekt.
Pole "name" w carStatus i carType nie jest czasami pakowane do BODY metody POST?

Gdy dodałem Consol Loga do posta i gdy dodaje dane bez Combo boxów i z danymi z ComboBoxa, to wygląda tak:

CarType oraz CarStatus w jsonie, który wysłałeś w pierwszym poście (Podobno działającym na postmanie) są obiektami z atrybutem "id" typu number.
W Twoim przypadku carType oraz carStatus od razu są przypisywane do typu number. A powinny być atrybutami klasy car z polem id typu number.

Plik carType.ts
export interface CarType {
   id: number
}

Plik carStatus.ts
export interface CarStatus {
   id: number
}

Plik car.ts
export interface Car {
   /* missing fields*/

   carType: CarType;
   carStatus: CarStatus;
}

Bez ComboBoxów Ci przechodzi wyłącznie dlatego, że są nullami. Nulla w Javie bez problemu można przypisać do obiektu CarStatus lub CarType.

dawid.wiklo4 napisał(a):

CarType oraz CarStatus w jsonie, który wysłałeś w pierwszym poście (Podobno działającym na postmanie) są obiektami z atrybutem "id" typu number.
W Twoim przypadku carType oraz carStatus od razu są przypisywane do typu number. A powinny być atrybutami klasy car z polem id typu number.

Plik carType.ts
export interface CarType {
   id: number
}

Plik carStatus.ts
export interface CarStatus {
   id: number
}

Plik car.ts
export interface Car {
   /* missing fields*/

   carType: CarType;
   carStatus: CarStatus;
}

Bez ComboBoxów Ci przechodzi wyłącznie dlatego, że są nullami. Nulla w Javie bez problemu można przypisać do obiektu CarStatus lub CarType.

W pierwszym poście wkradł się błąd, w którym link do modelu samochodu wszedł w formatkę kodu do modelu statusu samochodu. Tu jest link do modelu:
https://pastebin.com/Jwhc8SeC

Jeśli chodzi o id to miałeś rację, gdy w ngValue zmieniłem id na name, to w consoli wyświetliły się poprawnie dane, ale nie przeszło to do tabeli:

Jeśli chodzi Postmana zapomniałem dodać, że może zapytanie przeszło, ale wynik tego w tabeli przedstawia się następująco:

Wiesz może co zmienić w modelu lub w serwisie by można było wyświetlić dane z Combo boxa i dodać je bez błędu 400?

Po prostu taki sam obiekt musi być zarówno po stronie frontu oraz backendu. Tu naprawdę nie ma żadnej większej filozofii. U Ciebie obiekty są inne, więc dostajesz błąd. Zawsze możesz utworzyć json'a na podstawie danych, które zgromadziłeś i dopiero go wysłać. Jeśli zrobisz to 1:1 w stosunku do tego, co jest w postmanie to będzie ok. Poniżej przykład:

const body = {
    'photos': [], // cautionPhotoInputData.photos,
    'caretakerCautionId': cautionPhotoInputData.caretakerCautionId,
    'userEmailAddress': cautionPhotoInputData.userEmailAddress
};

return this.http.post(url, body);

dawid.wiklo4 napisał(a):

Po prostu taki sam obiekt musi być zarówno po stronie frontu oraz backendu. Tu naprawdę nie ma żadnej większej filozofii. U Ciebie obiekty są inne, więc dostajesz błąd. Zawsze możesz utworzyć json'a na podstawie danych, które zgromadziłeś i dopiero go wysłać. Jeśli zrobisz to 1:1 w stosunku do tego, co jest w postmanie to będzie ok. Poniżej przykład:

const body = {
    'photos': [], // cautionPhotoInputData.photos,
    'caretakerCautionId': cautionPhotoInputData.caretakerCautionId,
    'userEmailAddress': cautionPhotoInputData.userEmailAddress
};

return this.http.post(url, body);

export class Car {
  id: number;
  mark: string;
  model: string;
  registrationNumber: string;
  axes: number;
  yearProduction: string;
  datePurchase: string;
  dateReview: string;
  carType:{
  id:number;
  name:string;
};
  carStatus: {
    id:number;
    name:string;
  };
}

Czyli taki model powinien wystarczyć(ewentualnie odejmując id lub name od tego)?

dawid.wiklo4 napisał(a):

Po prostu taki sam obiekt musi być zarówno po stronie frontu oraz backendu. Tu naprawdę nie ma żadnej większej filozofii. U Ciebie obiekty są inne, więc dostajesz błąd. Zawsze możesz utworzyć json'a na podstawie danych, które zgromadziłeś i dopiero go wysłać. Jeśli zrobisz to 1:1 w stosunku do tego, co jest w postmanie to będzie ok. Poniżej przykład:

const body = {
    'photos': [], // cautionPhotoInputData.photos,
    'caretakerCautionId': cautionPhotoInputData.caretakerCautionId,
    'userEmailAddress': cautionPhotoInputData.userEmailAddress
};

return this.http.post(url, body);

To się jeszcze o jedną rzecz zapytam. To co podałeś w przykładzie, to jest przykład modelu tak?

Zastanawiam się po co wstawiać console.log jak można bezpośrednio w przeglądarce sprawdzić, co się wysyła do serwera. Nagłówki, body, a także i odpowiedź oraz czas odpowiedzi.

dawid.wiklo4 napisał(a):

Po prostu taki sam obiekt musi być zarówno po stronie frontu oraz backendu. Tu naprawdę nie ma żadnej większej filozofii. U Ciebie obiekty są inne, więc dostajesz błąd. Zawsze możesz utworzyć json'a na podstawie danych, które zgromadziłeś i dopiero go wysłać. Jeśli zrobisz to 1:1 w stosunku do tego, co jest w postmanie to będzie ok. Poniżej przykład:

const body = {
    'photos': [], // cautionPhotoInputData.photos,
    'caretakerCautionId': cautionPhotoInputData.caretakerCautionId,
    'userEmailAddress': cautionPhotoInputData.userEmailAddress
};

return this.http.post(url, body);

obl napisał(a):

Zastanawiam się po co wstawiać console.log jak można bezpośrednio w przeglądarce sprawdzić, co się wysyła do serwera. Nagłówki, body, a także i odpowiedź oraz czas odpowiedzi.

Szczerze się przyznam, że dalej nie mam pojęcia jak to rozwiązać. Próbowałem techniki tej strony, ale nie dość, że teraz nawet mi zawartości tabeli nie pokazuje, bo

to jak próbuję dodać dane z ComboBoxami to error 400 nadal jest sygnalizowany.

Próbujesz wywołać metodę map na obiekcie, który jest null-em prawdopodobnie w pliku http-cars.service.ts

W konsoli przeglądarki w zakładce Network można zobaczyć wszystkie informacje dotyczące zapytań. Na jaką ścieżkę poszło, z jakim nagłówkiem, z jaką zawartością, jaka była odpowiedź zwrotna serwera itd.