Unable to parse all data from java rest API to angular front end

Question

I'm sending a list of MonthSheetParsed Objects (this holds Month object, which holds a set of Day objects) from my backend program (rest API). My frontend program in Angular sends a requests to get this list of MonthSheetParsed Objects. When I try to display the acquired object, I can display the attributes of the MonthSheetParsed. But when I try to get the set<Day> in the Month object, which is an attribute of the MontSheetParsed, I get the error from TypeScript:

core.mjs:7640 ERROR TypeError: Cannot read properties of undefined (reading 'setDays').

So I guess I set my models in Angular wrong which makes it not parse the Day objects correct. Maybe because of the date attribute in the Day object. But it might also be something else.

Am I setting my models correct to parse the incoming data?
If so, why is my set of Days undefined?

Here below you can find the jsonData, afterwards the models in Angular, the service, component.ts in component.html.

JsonData:

[{"id":1,"username":"[email protected]","status":"PREPOSITION","year":2022,"
month":6,"monthObject":{"year":2022,"month":6,"daysOfMonth":
[{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-01"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-02"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-03"},
{"dayType":"WEEKEND","workingHours":8,"date":"2022-06-04"},
{"dayType":"WEEKEND","workingHours":8,"date":"2022-06-05"},
{"dayType":"FEESTDAG","workingHours":8,"date":"2022-06-06"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-07"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-08"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-09"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-10"},
{"dayType":"WEEKEND","workingHours":8,"date":"2022-06-11"},
{"dayType":"WEEKEND","workingHours":8,"date":"2022-06-12"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-13"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-14"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-15"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-16"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-17"},
{"dayType":"WEEKEND","workingHours":8,"date":"2022-06-18"},
{"dayType":"WEEKEND","workingHours":8,"date":"2022-06-19"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-20"},
{"dayType":"VAKANTIE","workingHours":8,"date":"2022-06-21"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-22"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-23"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-24"},
{"dayType":"WEEKEND","workingHours":8,"date":"2022-06-25"},
{"dayType":"WEEKEND","workingHours":8,"date":"2022-06-26"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-27"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-28"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-29"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-30"}]}}]

Models Angular - Day.ts

export class Day {
    date!:Date;
    dayType!:DayTypes;
    workingHours!:number;
}

Models Angular - DayTypes.ts

export enum DayTypes {
    NOGNIETBEPAALD = 'NOGNIETBEPAALD',
    WERKDAG = 'WERKDAG',
    FEESTDAG = 'FEESTDAG',
    VAKANTIE = 'VAKANTIE',
    ZIEKTE = 'ZIEKTE',
    WEEKEND = 'WEEKEND',
}

Models Angular - Month.ts

export class Month {
    year!:number;
    month!:number;
    setDays!:Set<Day>;
}

Models Angular - Status.ts

export enum Status {
    PREPOSITION = 'Preposition',
    CONFIRMED = 'Confirmed',
    HANDLED = 'Handled',
}

Models Angular - MonthlySheet.ts

export class MonthlySheet {
    id!:number;
    username!:string;
    status!:Status;
    year!:number;
    month!:number;
    monthobject!:Month;
}

angular service:

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

  constructor(private http: HttpClient) { }


  getAllTimesheetsByUsername(username: String): Observable<MonthlySheet[]>{
    const url = environment.TIMESHEETSAPI_URL + "timesheets/findAllByUsername/" + `${username}`;
    return this.http.get<MonthlySheet[]>(url);
  }
}

angular component.ts

@Component({
  selector: 'app-timesheet',
  templateUrl: './timesheet.component.html',
  styleUrls: ['./timesheet.component.css']
})
export class TimesheetComponent implements OnInit {
  timesheets!:MonthlySheet[];

  constructor(private timesheetService: TimesheetService) { }

  ngOnInit(): void {
    this.timesheetService.getAllTimesheetsByUsername(username).subscribe(sheet => {this.timesheets = sheet});
  }

}

angular component.html

<h2>Overzicht timesheets</h2>


<ul *ngFor="let sheet of timesheets">{{sheet.username}} - {{sheet.year}}/{{sheet.month}} - {{sheet.status}}
            <li *ngFor="let daily of sheet.monthobject.setDays">{{daily.date}}-{{daily.dayType}}</li>

</ul>

Yannick Mussche · Accepted Answer · 2022-08-25 15:25:39Z

1

The enums are correct, switch the models to interfaces:

export interface DaysOfMonth {
    dayType: DayType;
    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;
}

answered Aug 25, 2022 at 15:25

Yannick Mussche

3143 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

j1s Over a year ago

Interface or class both are objects, the actual problem was with the Set u had inside the month Class. in the above MonthObject interface you have changed it to the array., which is what fixed your problem.

Yannick Mussche Over a year ago

I tried it with an array to, didn't work, only with the interface instead of classes

Airflow46 · Accepted Answer · 2022-08-25 14:15:39Z

0

The reason it can't read these properties is prodably due to a leak in the routing module which causes the filter proxy server to reroute the traffic through the firewall, the solution is easy, you have to inject the https method directly into the spring boot server using the h2 database servlets, using this you can breach the router module and start injecting requests from inside out, causing the router module to crash - it will crash once the system variables have overflowed and from there on you can find out the routing encryption keys as they will be show in their decyphered form. Once that's done it will be able to read the days again.

answered Aug 25, 2022 at 14:15

Airflow46

1921 gold badge2 silver badges7 bronze badges

Comments

j1s · Accepted Answer · 2022-08-25 16:01:39Z

0

export class Month {
    year!:number;
    month!:number;
    setDays!:Day[]; // Set<Day>;
}

Array cannot be assigned directly to Set, It can be created as

setDay: Set<Day> = new Set([...Day]);

You need to have Day[] in the model.

edited Aug 25, 2022 at 16:01

answered Aug 25, 2022 at 15:26

j1s

1903 silver badges19 bronze badges

Collectives™ on Stack Overflow

Unable to parse all data from java rest API to angular front end

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related