Wsrtjtyk

I need help accessing some data and displaying it on my front-end which is Angular ( code below ) I have tried multiple things and am out of options currently.

The issue is I am not able to display this data in the UI and parse through it properly, why this is happening is because i'm unsure how to handle the object itself. You will see in the response object I am sharing that some of these "workout" objects contain 2, 3 or perhaps even 5 objects and displaying more than one is the issue; as of right now I am only displaying one through hard-coding the index value which is not desirable .Please see the code below and photo.

image that displays the ui

Expected:
User can see more than one exercise in the UI and UI will adapt to accommodate how many objects are present for the date

Actual:
Can just see one exercise and related sets & reps because the object index is hardcoded as [0] instead of getting the length and dealing with this properly

Ideas:
get length of array of objects loop through them and push them into array

What The Response Object Looks Like:
**

owner_id: "2"



personal_record: false



routine_id: "6"



upload_date: "2018-11-08T00:00:00.000Z"



workout: (4) [{…}, {…}, {…}, {…}]



workout_id: "1544921407"



proto: Object



1:



owner_id: "2"



personal_record: false



routine_id: "7"



upload_date: "2018-11-10T00:00:00.000Z"



workout: (2) [{…}, {…}]



workout_id: "2099633889"



proto: Object



2:



owner_id: "2"



personal_record: false



routine_id: "8"



upload_date: "2018-11-16T00:00:00.000Z"



workout: Array(3)



0: {title: "leg pres", setOne: 88, setOneWeight: 879, setTwo: 766, setTwoWeight: 76976, …}



1: {title: "lunges", setOne: 8989898, setOneWeight: 9087, setTwo: 87, setTwoWeight: 8707, …}



2: {title: "leg press", setOne: 8878787, setOneWeight: 87, setTwo: 8708, setTwoWeight: 87, …}



length: 3



proto: Array(0)



workout_id: "3720835005"



proto: Object



length: 3

ANGULAR COMPONENT

import { Subscription } from 'rxjs/Subscription';

    import { Component, OnInit, ViewChild, Input, OnDestroy } from '@angular/core';

    import { CalendarComponent } from 'ng-fullcalendar'; //https://www.npmjs.com/package/ng-fullcalendar

    import { Options } from 'fullcalendar';

    import { ActionsService } from '../actions.service';

    import { NgxSmartModalService } from 'ngx-smart-modal';

    import { FormBuilder, FormControl, FormGroup, Validators, FormsModule, FormArray } from '@angular/forms';

    import { Router } from '@angular/router'

    import { Observable } from "rxjs/Observable";

    import 'rxjs/add/operator/catch';

    import 'rxjs/add/operator/map'

    import { Deserializable } from './RoutineDTO';

    import { NgxSpinnerService } from 'ngx-spinner';

    @Component({

    selector: 'app-routine',

    templateUrl: './routine.component.html',

    styleUrls: ['./routine.component.css'],

    providers: [ActionsService]

    })



    export class RoutineComponent implements OnInit {

    private experiment: any

    private eventArray: any;

    private selectedEvent: any;

    private selectedEventTitle: any;

    private selectedEventReps: any;

    private selectedWeight: any;

    private eventObject: any

    private calDate: any;

    private localDate: any;

    private workoutID: any;

    private exerciseArray: any;

    private exerciseOBJ: any;

    private exerciseName: any;

    private bodypartName: any;

    private set_one: any;

    private set_two: any;

    private set_three: any;

    private set_four: any;

    private weight_one: any;

    private weight_two: any;

    private weight_three: any;

    private weight_four: any;

    private uploadDate: any;

    private trainingEventData: any;

    private eventForm: FormGroup;

    private trainingDate: FormGroup;

    private bodyText: string;

    calendarOptions: Options;

    toggleAction: boolean = false;

    displayEvent: any;

    private subscribe: Subscription;

    private usersSession: Array;



    @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;

    constructor(

    private spinner: NgxSpinnerService,

    private _fb: FormBuilder,

    protected eventService: ActionsService,

    public ngxSmartModalService: NgxSmartModalService,

    private router: Router

    ) { }



    ngOnInit() {

    this.spinner.show();

    this.eventService.getEvents()

    .subscribe((data: any) => {

    this.trainingEventData = data;



        this.workoutID = this.trainingEventData.map(function (id) {



          return id.workout_id



        });







        this.uploadDate = this.trainingEventData.map(function (date) {



          return date.upload_date



        });



        //contains workout object



        this.exerciseArray = this.trainingEventData.map(function (routine) {



          return routine.workout



        });







        //get all values instead of just first object do this for object 1,2,3,4,5 ...



        this.bodypartName = this.exerciseArray.map(function (bodypart) {



          return bodypart[0].title



        })







        this.set_one = this.exerciseArray.map(function (set_one) {



          return set_one[0].setOne



        })







        this.set_two = this.exerciseArray.map(function (set_two) {



          return set_two[0].setTwo



        })







        this.set_three = this.exerciseArray.map(function (set_three) {



          return set_three[0].setThree



        })







        this.set_four = this.exerciseArray.map(function (set_four) {



          return set_four[0].setFour



        })







        this.weight_one = this.exerciseArray.map(function (setOneWeight) {



          return setOneWeight[0].setOneWeight



        })







        this.weight_two = this.exerciseArray.map(function (setTwoWeight) {



          return setTwoWeight[0].setTwoWeight



        })







        this.weight_three = this.exerciseArray.map(function (setThreeWeight) {



          return setThreeWeight[0].setThreeWeight



        })







        this.weight_four = this.exerciseArray.map(function (setFourWeight) {



          return setFourWeight[0].setFourWeight



        })



        // convert UTC to local browser time



        this.localDate = this.uploadDate.map(function (newDate) {



          return new Date(newDate)



        })











        let getEvent = ;



        for (let i = 0; i < 10; i++) {







          let workoutID = this.workoutID[i]



          let bodypart = this.bodypartName[i];



          let date = this.localDate[i];



          let setOneReps = this.set_one[i]



          let setTwoReps = this.set_two[i]



          let setThreeReps = this.set_three[i]



          let setFourReps = this.set_four[i]



          let setOneWeight = this.weight_one[i]



          let setTwoWeight = this.weight_two[i]



          let setThreeWeight = this.weight_three[i]



          let setFourWeight = this.weight_four[i]



          let insertEvents = {};







          insertEvents =



            {



              id: workoutID,



              title: bodypart,



              start: date,



              color: 'yellow',   // an option!



              textColor: 'black', // an option!



              setOneReps: setOneReps,



              setTwoReps: setTwoReps,



              setThreeReps: setThreeReps,



              setFourReps: setFourReps,



              setOneWeight: setOneWeight,



              setTwoWeight: setTwoWeight,



              setThreeWeight: setThreeWeight,



              setFourWeight: setFourWeight



            }



          getEvent.push(insertEvents);







        }







        this.calendarOptions = {



          editable: true,



          eventLimit: false,



          header: {



            left: 'prev,next today',



            center: 'title',



            right: 'month,agendaWeek,agendaDay,listMonth'



          },



          events: getEvent



        };







      });







    this.eventForm = this._fb.group({



      repsArray: this._fb.array([



        this.getUnit()



      ])



    });







    this.trainingDate = new FormGroup({



      datePicked: new FormControl('', {



        validators: Validators.required



      })



    });



    }



    clickButton(model: any) {

    this.spinner.show();

    this.addEvent()

    this.displayEvent = model;

    }



    //TODO responsible for the click

    eventClick(calEvent, jsEvent, view) {

    this.spinner.show();

    this.selectedEvent = calEvent.event

    console.log(this.selectedEvent)

    this.eventArray = ;

    let repsArray = ;

    let weightArray = ;



    let EventTitle = this.selectedEvent.title



    let s1r = this.selectedEvent.setOneReps;



    let s2r = this.selectedEvent.setTwoReps;



    let s3r = this.selectedEvent.setThreeReps;



    let s4r = this.selectedEvent.setFourReps;



    repsArray.push(s1r, s2r, s3r, s4r)







    let s1w = this.selectedEvent.setOneWeight;



    let s2w = this.selectedEvent.setTwoWeight;



    let s3w = this.selectedEvent.setThreeWeight;



    let s4w = this.selectedEvent.setFourWeight;



    weightArray.push(s1w, s2w, s3w, s4w)







    this.eventArray.push({ EventTitle, repsArray, weightArray })







    console.log(this.eventArray)



    this.ngxSmartModalService.getModal('trainingEvent').open()



    }



    updateEvent(model: any) {

    alert('updating event')

    model = {

    event: {

    id: model.event.id,

    start: model.event.start,

    end: model.event.end,

    title: model.event.title

    // other params

    },

    duration: {

    _data: model.duration._data

    }

    }

    this.displayEvent = model;

    }



    openModal(id: string) {

    // this.modalService.open(id);

    }



    closeModal(id: string) {



    }



    createEventID() {

    let array = new Uint32Array(10);

    crypto.getRandomValues(array);

    let num = Math.floor(Math.random() * 10 + 1);

    return array[3]

    }



    addEvent() {

    let eventObject = {

    id: this.createEventID(),

    title: this.eventForm.value.bodypart,

    start: this.trainingDate.value.datePicked,

    data: this.eventForm.value

    };

    console.log(eventObject)



    this.ucCalendar.fullCalendar('renderEvent', eventObject)



    this.eventService.updateEvent(eventObject)



      .subscribe(status => {



        console.log('=' + status);



      })



    return event



    }



    private getUnit() {

    return this._fb.group({

    title: [''],

    setOne: [''],

    setOneWeight: [''],

    setTwo: [''],

    setTwoWeight: [''],

    setThree: [''],

    setThreeWeight: [''],

    setFour: [''],

    setFourWeight: [''],

    });

    }



   // Add new row into form

    private addUnit() {

    const control = this.eventForm.controls['repsArray'];

    control.push(this.getUnit());

    }



    //Remove from form on click delete button

    private removeUnit(i: number) {

    const control = this.eventForm.controls['repsArray'];

    control.removeAt(i);

    }

    }

HTML

View Session

    <mat-accordion>

      <mat-expansion-panel *ngFor="let panel of eventArray">

        <mat-expansion-panel-header>

         <h1> {{panel.EventTitle}} </h1> 

        </mat-expansion-panel-header>



        <mat-list>

          <mat-list-item *ngFor="let repsCount of panel.repsArray" > <i class="material-icons">

            power_input

            </i> <div class="space"></div>Reps: {{repsCount}}

          </mat-list-item>



          <mat-divider></mat-divider>

          <mat-list-item *ngFor= "let weightCount of panel.weightArray"> <i class="material-icons">

            fitness_center

            </i> <div class="space"></div> Weight: {{weightCount}}

          </mat-list-item>



        </mat-list>

      </mat-expansion-panel>

    </mat-accordion>



  </div>

</div>   </ngx-smart-modal> </div>

UPDATE: finally found the solution it involved just going back to scratch and taking baby-steps to the problem. kit was not terribly difficult but is tricky.

 ngOnInit() {

    this.route.params.subscribe(params => {

      this.username = params['username']; // (+) converts string 'id' to a number

      this.eventService.getEvents(this.username)

        .subscribe((data: any) => {

          this.trainingEventData = data;

          console.log(this.trainingEventData)



          this.uploadDate = this.trainingEventData[0].map(function (date) {

            return date.upload_date

          });



          var allEvents = ;

          $.each(this.trainingEventData[0], function (key, value) {

            var title = value.workout[0].title

            var date = new Date(value.upload_date)

            var personal_record = value.personal_record

            var id = value.workout_id

            var workout = value.workout

            var color = "yellow"

            var textColor = 'black'



            var insertEvents = {};

            insertEvents = {

              title: title,

              id: id,

              personal_record: personal_record,

              workout: workout,

              start: date,

              color: 'yellow',   // an option!

              textColor: 'black', // an option!

            }

            allEvents.push(insertEvents);

          }

          );



          this.calendarOptions = {

            editable: true,

            eventLimit: false,

            header: {

              left: 'prev,next today',

              center: 'title',

              right: 'month,agendaWeek,agendaDay,listMonth'

            },

            events: allEvents

          };

        });



      this.eventForm = this._fb.group({

        repsArray: this._fb.array([

          this.getUnit()

        ])

      });



      this.trainingDate = new FormGroup({

        datePicked: new FormControl('', {

          validators: Validators.required

        })

      });

    })

  }



  clickButton(model: any) {

    this.spinner.show();

    this.addEvent()

    this.displayEvent = model;

  }



  //TODO responsible for the click

  eventClick(calEvent, jsEvent, view) {

    this.selectedEvent = calEvent.event

    var workoutSession = ;



    for (let [key, value] of Object.entries(calEvent.event.workout)) {



      var title = value.title;

      var personal_record = value.personal_record

      var repOne = value.setOne;

      var repTwo = value.setTwo;

      var repThree = value.setThree;

      var repFour = value.setFour;

      var s1w = value.setOneWeight;

      var s2w = value.setTwoWeight;

      var s3w = value.setThreeWeight;

      var s4w = value.setFourWeight;





      var insertEvents = {};

      insertEvents = {

        title: title,

        personal_record: personal_record,

        repOne: repOne,

        repTwo: repTwo,

        repThree: repThree,

        repFour: repFour,

        weightOne: s1w,

        weightTwo: s2w,

        weightThree: s3w,

        weightFour: s4w

      }

      workoutSession.push(insertEvents);

      this.Journal = workoutSession;



    }

    // this.bottomSheet.open(BottomSheetJournal);

    this.ngxSmartModalService.getModal('trainingEvent').open()

  }