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

Time:08-26

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>

CodePudding user response:

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.

CodePudding user response:

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;
}

CodePudding user response:

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.

  • Related