Ответ нулевой после запроса POST Http в угловых 7

Question

Я пытаюсь отправить две данные на мой сервер RESTful, работающий на glassfish. Пользователь должен выбрать ресторан в списке данных. Я хочу отправить идентификатор и название ресторана. С console.log я могу распечатать значения идентификатора и имени, но мой ответ возвращает ноль. Любая идея, почему это происходит и как это решить?

файл ts

export class OrganizeComponent implements OnInit {

  public codeValue: string;

  codeList = [
    { id: 1, name: 'Mcdonalds' },
    { id: 2, name: 'Kentucky Fried Chicken' },
    { id: 3, name: 'Burger King' },
    { id: 4, name: 'Domino`s pizza' },
    { id: 5, name: 'New York Pizza' }
  ];


  @ViewChild('f') form: NgForm;
  restaurant = {
    id: 0,
    name: ''
  };



  constructor(private http: HttpClient) {
  }

  ngOnInit() {
  }

  public saveCode(e): void {
    let name = e.target.value;
    let list = this.codeList.filter(x => x.name === name)[0];
    // console.log(list.id);
    // console.log(list.name)


    this.restaurant.id =  list.id;
    this.restaurant.name = list.name;

console.log(list.id);
console.log(list.name);

    this.http.post('http://localhost:8080/aquadine-jee/resources/restaurant', {
      id: list.id,
      name: list.name
    })


      .subscribe( // subscribe to observable http.post
        res => {
          console.log("response" + " " + res); // log results otherwise log error
        },
        err => {
          console.log('Error occured');
        }
      );

HTML-файл

<label for="codes">Choose a restaurant:</label>
    <form
      (ngSubmit)="onOrganize(f)"
      #f="ngForm">
      <input type="text"  list="codes"  [(ngModel)]=codeValue [ngModelOptions]="{standalone: true}" (change)="saveCode($event)">
      <datalist id="codes">
        <option *ngFor="let c of codeList" [value]="c.name" >{{c.name}}</option>
      </datalist>
    </form>

Код сервера:

@Stateless
@Path("restaurant")
public class RestaurantResource {

    @Inject
    private RepositoryService repositoryService;

    @GET
    @Path("restaurant")
    @Produces("application/json")
    public Response all(){
        List<Restaurant> all = repositoryService.getAllRestaurants();
        return Response
                .status(200)
                .header("Access-Control-Allow-Origin", "*")
                .entity(all)
                .build();
    }


    @GET
    @Produces("application/json")
    public List<Restaurant> getAllRestaurants(){
        return repositoryService.getAllRestaurants();

    }

    @POST
    @Consumes("application/json")
    public Response save(Restaurant restaurant){
        repositoryService.save(restaurant);
        return Response
                .status(201)
                .build();
    }

public class Restaurant {

    @Id
    @Column(name="idRestaurant")
    @NotBlank
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;



    public Restaurant(Integer id,Integer restaurantId , String naam) {
        this.id = id;
        this.restaurantId = restaurantId;
        this.naam = naam;
    }

Ошибка в бэкэнд-сервисе:

внутренняя ошибка сервера 500. Системное исключение произошло во время вызов в EJB RepositoryService, метод: public void nl.aquadine.service.RepositoryService.save (nl.aquadine.model.Restaurant)]] и javax.ejb.TransactionRolledbackLocalException: исключение брошено от bean-компонента и вызвано: org.hibernate.PersistentObjectException: отдельное юридическое лицо передано для сохранения: nl.aquadine.model.Restaurant at org.hibernate.event.internal.DefaultPersistEventListener.onPersist (DefaultPersistEventListener.java:124) на org.hibernate.event.internal.DefaultPersis и т. д.

Answer 1

1. Сначала проверьте с помощью POSTMAN или любого другого сбора, чтобы проверить реакцию вашего бэкенда, если он работает нормально, тогда вы можете сосредоточиться на переднем конце.

Answer 2

Добавьте следующее к вашему коду

import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json'
  })
};

const data = {
   id: list.id,
   name: list.name
};

  this.http.post('http://localhost:8080/aquadine-jee/resources/restaurant', 
      JSON.stringify(data), httpOptions)