TypeError: this.c[i] is undefined

Question

I am actually trying to show photos using NgxGallery. but when i run the code i found an unexpected error in console. I am using Angular Version 12. here is my code:-

member.component.ts

  ngOnInit(): void {
      this.galleryPosts = this.getPosts();
      
     ...
  }

   n:any=0;
   c:any=[];
   
getPosts(): NgxGalleryImage[] {
    const postUrls = [];
    for (let i = this.n; i < this.member.posts.length ; i++) {
         this.c = this.member.posts[i];
        for(let j=0; j < this.c[i].postedpics.length;j++)
        {
          postUrls.push({
            small: this.c[j]?.postedpics.url,
            medium: this.c[j]?.postedpics.url,
            big: this.c[j]?.postedpics.url
          })

        }
        this.n++;
        return postUrls;
    }
}

member.component.html

  <div *ngFor="let m of member.posts">
                    <p>{{m.description}}</p>
                    <p  *ngFor="let s of m.postedpics">{{s.url}}</p>
                    <ngx-gallery class="mt-4" [options]="galleryOptions" [images]="galleryPosts" 
                        style="display: inline-block; margin-bottom: 20px;"></ngx-gallery>
                </div>

here is the error:-

ERROR TypeError: this.c[i] is undefined
    Ember 2
    RxJS 20
    Angular 17
    RxJS 8
    Angular 17
    RxJS 22

For alternative I tried <ngx-gallery class="mt-4" [options]="galleryOptions" [images]="small:s.url;medium:s.url;big:s.url" style="display: inline-block; margin-bottom: 20px;"></ngx-gallery> but found a lot errors. it's ok.

My actual intention is how i resolve this c[i] is undifined issue, also Image not displayed as expected. I don't understand. I am an absolute beginner. please help.

I voted to close this as a typo as you assign `this.c = this.member.posts[i];`, which makes `c` no longer be an array. — fredrik, Nov 29 '22 at 16:56
@fredrik please clarify specificly then what's the exact solution here? — Peter Parker, Nov 29 '22 at 17:00
@frederik If `this.member.posts = [['something']]` c will still be an array... — Salketer, Nov 29 '22 at 17:02

score 1 · Accepted Answer · answered Nov 29 '22 at 17:01

Try not to use properties as local variables, this gets confusing (this is living proof!)

getPosts(): NgxGalleryImage[] {
    const postUrls = [];
    for (let i = this.n; i < this.member.posts.length ; i++) {
         const post = this.member.posts[i];
        for(let j=0; j < post.postedpics.length;j++)
        {
          postUrls.push({
            small: post.postedpics[j]?.url,
            medium: post.postedpics[j]?.url,
            big: post.postedpics[j]?.url
          })

        }
        this.n++;
        return postUrls;
    }
}

See, I've changed that c to post and it made it clear that there was a confusion in your code... Does this look better?

It's look good. but when i return ```postUrls``` then i don't understand why next time n's value not change. like for n=0 for all ```postedpic``` n=1 for all ```postedpics``` above all time n =0! but why i don't understand.can you please help this. — Peter Parker, Nov 29 '22 at 17:09

TypeError: this.c[i] is undefined

1 Answers1