title: Unable to access arrays in cloud firestore
body: <p>I am trying to retrieve an array from cloud firestore but when I log , it seems it is undefined.</p>
  
  <p>This is my Cloud firestore structure.
  <a href="https://i.stack.imgur.com/BcNr8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BcNr8.png" alt="This is my Cloud fire store structure"></a></p>
  
  <p>I am trying to get the array from the cloud firestore and store it in a variable in the ticket.component class</p>
  
  <p><strong>ticket.component.ts</strong></p>
  
  <pre><code>export class TicketComponent {
      constructor( public cardService: CardService,private arrayService: ArrayService ) {  }
  
      //cards: Cardint[];
  
      ngOnInit()
      {
  
      }
  
      card : Cardint = this.arrayService.card;
  
      url: String =this.card.videolink;
  
      movieTitle ="";
      screen: string = "LUXE CINEMAS";
      time: string = "FRI, 6:45PM"
  
      rows: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
      cols: number[]  = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      reserved :string []= this.card.Reserved; 
  
      /*eg: reserved: string[] = ['A2', 'A3', 'F5', 'F1', 'F2','F6', 'F7', 'F8', 'H1', 'H2', 'H3', 'H4']*/
  
      selected: string[] = [];
  
      ticketPrice: number = 120;
      convFee: number = 30;
      totalPrice: number = 0;
      currency: string = "Rs";
  
      //return status of each seat
      getStatus = function(seatPos: string) {
          console.log(this.reserved);
          if(this.reserved.indexOf(seatPos) !== -1) {
              return 'reserved';
          } else if(this.selected.indexOf(seatPos) !== -1) {
              return 'selected';
          }
      }
  
      //clear handler
      clearSelected = function() {
          this.selected = [];
      }
  
      //click handler
      seatClicked = function(seatPos: string) {
          console.log(this.reserved);
          var index = this.selected.indexOf(seatPos);
  
          if(index !== -1) {
              // seat already selected, remove
              this.selected.splice(index, 1)
          } else {
              //push to selected array only if it is not reserved
              if(this.reserved.indexOf(seatPos) === -1)
                  this.selected.push(seatPos);
          }
      }
  
      //Buy button handler
      showSelected = function() {
          console.log(this.reserved);
          if(this.selected.length &gt; 0) {
              alert("Selected Seats: " + this.selected + "\nTotal: "+(this.ticketPrice * this.selected.length + this.convFee));
          } else {
              alert("No seats selected!");
          }
      }
  
  }
  </code></pre>
  
  <p>In cardservice I am getting the full collection of cards. </p>
  
  <p><strong>cardservice.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import {Cardint} from '../service/cardint';
  import { AngularFirestore ,AngularFirestoreCollection,AngularFirestoreDocument} from "@angular/fire/firestore";
  import { Observable } from 'rxjs';
  
  @Injectable({
      providedIn: 'root'
  })
  
  export class CardService {
      cards: Observable&lt;Cardint []&gt;
      cardCollection : AngularFirestoreCollection&lt;Cardint&gt;;
      constructor(public afs: AngularFirestore) {
          this.cards= this.afs.collection('cards').valueChanges();
      }
  
      getcards(){
          return this.cards;
      }
  
  }
  </code></pre>
  
  <p><strong>arrayservice.ts</strong></p>
  
  <pre><code>export class ArrayService {
  
      card: any;
  
      constructor(){}
  
      doAnyThing()
      {
          //do something
      }
  
  }
  </code></pre>
  
  <p><strong>usercomponent.ts</strong></p>
  
  <pre><code>export class UserComponent implements OnInit {
  
      cards: Cardint[];
  
      constructor(public auth: AuthService , private arrayService: ArrayService, public cardService: CardService) { }
  
      ngOnInit() {
          this.cardService.getcards().subscribe( cards =&gt; {
              this.cards = cards;
          })
      }
  
      // u=JSON.parse(localStorage.getItem('user')).email;
      book = 'BookNow'
  
      onUserClick(card)
      {
          this.arrayService.card = card;
      }
  
  }
  </code></pre>
  
  <p>When user clicks on the particular card , I will send the particular card details to ticketcomponent using a service. The problem arrives here when I try to  access the array of particular card. It says that the variable is undefined.</p>