CODEWITHSUNDEEP
angulartypescriptrxjsobservable
ggsimmonds1
ggsimmonds1

Reputation: 1

Observable returns array of objects, but cannot access object properties

I'm just learning Angular and been battling this all weekend. I have a http call to pull a collection of Schedule objects. The objects render in the DOM, but I cannot access the properties in my component class which I need to do to manipulate the output.

My service

public getSchedule(model: GetSchedule): Observable<Schedule[]> {
        console.log('called get schedule in the service');
        console.log(model);
        console.log(environment.urls.appointment.getSchedule);
        return this.http.post<Schedule[]>(environment.urls.appointment.getSchedule , model);

My component

public schedules: Schedule[];
daySelected:string;

 public getSchedule(){
      console.log(this.daySelected);
      let time = new Date(this.daySelected)
      let date = this.datePipe.transform(time, 'yyyy-MM-dd');
      const search = new GetSchedule();
      search.date = date;
      //search.plant = this.shipment.origin.id;
      search.plant = "1300";
      search.transitType =1;
      search.isPreloaded=this.isPreloaded;

      this.appointmentService.getSchedule(search).subscribe((schedules)=>{
        this.schedules=schedules;
        console.log(this.schedules); <---------This prints out the array of all schedules properly
        console.log(this.schedules.startTime); <--------------------This returns undefined
      });
    }

HTML

<div class = "col-sm-4">
            <ng-container *ngIf="schedules?.StartTime">
            <div *ngFor="let schedule of schedules; trackBy:trackDay; let i = index;" >
                <div><input type="radio" class="hidden" name="slot" [(ngModel)]="slotSelected" (change)="scheduleSlot(slotSelected)" id="{{schedules.indexOf(schedule)}}" value={{i}}>
                <label [ngClass]="{'disabled': schedule.Block ==1}" class="radio" for="{{schedules.indexOf(schedule)}}">{{schedule.StartTime}}</label></div>
            </div>
            </ng-container>
        </div>

If I remove the elvis operator in the ngIf the page displays with the correct start time, but if I try to console.log the start time it returns undefined. Keeping the elvis operator results in nothing displaying.

The api call returns an array containing 72 objects with the following form in the browser console: (72)[{...}, {...},{...}....]. Expanding that reveals 0:{list of all properties with correct values}

The schedule has a property for slot which is a number 1-12 to represent a two hour window. Its returning 6 entries per slot so I need to be able to use find(x=>x.startTime == "8:00") to only return one entry per slot. But whenever I add that startTime is thrown as undefined.

Any ideas?

Upvotes: 0

Views: 600

Answers (2)

ggsimmonds1
ggsimmonds1

Reputation: 1

I finally found the problem, and it wasn't with my code but with what was getting sent back in the API call. It was a naming issue. What was getting sent back was StartTime, I was looking for startTime because everything else in this project follows camel case. A definite facepalm moment. Now I just have to figure out where to put the Find code to filter out duplicates

Upvotes: 0

Muirik
Muirik

Reputation: 6289

The problem is that you don't define which element within the array you want to draw from. Remember, startTime is a property on each object WITHIN the array, not on the array itself. Thus this won't work:

console.log(this.schedules.startTime);

Whereas this will work:

console.log(this.schedules[0].startTime);

Upvotes: 2

Related Questions