How to pass array of dates from angular to java

Question

I'm sending an array holding objects which hold a date-attribute from angular to spring rest API. In the rest API this attribute is a LocalDate. Java takes all the the date attributes as null objects. How can I make sure the values get passed correct?

I've found this similar topic:

https://stackoverflow.com/questions/57371807/how-to-convert-date-type-angular-to-localdate-in-java#:~:text=If%20you%20just%20want%20to,yyyy%2DMM%2Ddd%22%20.

I have tried converting the date into a string which did not help. My question is different since I want to send an array holding objects which have a date attribute. So I cannot just send 1 date using params. Here below I posted the angular models and the service:

export interface DaysOfMonth {
    dayType: DayTypes;
    workingHours: number;
    date: Date;
}

export interface MonthObject {
    year: number;
    month: number;
    daysOfMonth: DaysOfMonth[];
}

export interface TimeSheet {
    id: number;
    username: string;
    status: Status;
    year: number;
    month: number;
    monthObject: MonthObject;
}

service:

@Injectable({
  providedIn: 'root'
})
export class TimesheetService {

  constructor(private http: HttpClient, private datePipe: DatePipe) { }


  updateDaytype(sheet: TimeSheet): Observable<TimeSheet>{
    console.log("updateDaytype reached")
    const url = environment.TIMESHEETSAPI_URL + "timesheets/updateSheetById";
    return this.http.put<TimeSheet>(url, sheet);
  }
}

Start by looking at your network console and see what the payload of your PUT is.. — MikeOne, Aug 26 '22 at 10:40
it sends de dates but Java can't read it so it sets them as null — Yannick Mussche, Aug 26 '22 at 10:51
Requests are using json. Which means as soon as hou sent something, an object is serialized to a string. You’d have to parse this string back to the object you need on the server side. No way around it really. — MikeOne, Aug 26 '22 at 10:52
But why only with the date? It has no problems with any other attribute. Also, when it enters the controller, it is already null, so I cannot change anything really. — Yannick Mussche, Aug 26 '22 at 10:55

score 2 · Accepted Answer · answered Aug 26 '22 at 10:56

Java LocalDate is a date without any time info and no timezone info - just the information of the date, such as 12th August of 2022. Now the Spring Server and the Angular Client have to agree on a common format to communicate this information. In JSR-310 this is in the date format of "yyyy-MM-dd". In order to enforce Spring to use this type of Serialization/Deserialization when faced with JSON you have to configure it that way.

// add depedency
compile ("com.fasterxml.jackson.datatype:jackson-datatype-jsr310")

And add this to your DTO

@JsonDeserialize(using = LocalDateDeserializer.class)
@JsonSerialize(using = LocalDateSerializer.class)
private LocalDate date;

Now on the Angular part you have to convert your Date object to adhere to the format, too. Therefore, maybe do something like this with day.js:

Date.prototype.toJSON = function() {
  return dayjs(d).format("yyyy-MM-dd")
};

Note that my solution is just a dirty approach and not tested.

I tried to edit your response. The angular approach is not necessary. Also you don't have to import the dependency if you make the classes yourself. I found how here: https://stackoverflow.com/questions/28802544/java-8-localdate-jackson-format — Yannick Mussche, Aug 26 '22 at 11:41

How to pass array of dates from angular to java

1 Answers1