creating an object with hours through the user interface

I am having trouble creating the right object. I have a calendar that stores the hours. He wants timeTable to hold such an object, for example

"timeTable":{
    "0": [{"from":"08:00","to":"12:00"}, {"from":"14:00","to":"18:00"}],
    "1": [{"from":"08:00","to":"16:00"}]
  }

How, after clicking the save button, send such an object to:

 timeTable: Map<number, Array<HourScheduleDefinitionModel>>;

interface:

interface HourScheduleDefinitionModel {
  from: string;
  to: string;
}