Error: Uncaught (in promise): TypeError: Cannot read property 'status' of null

Question

I am trying to filter the JSON results of tickets from open to closed and in progress, the json data is returned correctly from the api and saved in totalTicketsDataMain variable. But whenever I try to filter the data the varible to store openTicketsData throws and error on mozilla

ERROR Error: Uncaught (in promise): TypeError: x is null
getTicketsData/</this.openTicketsData

and on google chrome throws the error

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'status' of null
TypeError: Cannot read property 'status' of null
    at ticketlist.component.ts:98

the line number 98

this.openTicketsData = this.totalTicketsDataMain.filter(x => (x.status === "Open" || x.status === "In Progress")); //line 98

am not sure what I am missing or am doing wrong this is my TicketlistComponent

openTicketsData: Ticket[];
  totalTicketsDataMain: Ticket[];

status = "Open";
 async ngOnInit(): Promise<void> {
       await this.getTicketsData();
  }

 async getTicketsData(): Promise<void> {
    this.totalTicketsDataMain = await this.ticketService.getTickets(this.currentProjectId);
    if (this.teamId && this.eaId && this.householdId) {
      this.totalTicketsDataMain = this.totalTicketsDataMain.filter(x => x.eaId == this.eaId && x.householdId == this.householdId && x.teamId == this.teamId && x.status == this.status);
    }

    if (this.totalTicketsDataMain) {
      this.openTicketsData = this.totalTicketsDataMain.filter(x => (x.status === "Open" || x.status === "In Progress")); //line 98
      this.inProgressTicketsData = this.totalTicketsDataMain.filter(x => (x.status === "In Progress"));
      this.closedTicketsData = this.totalTicketsDataMain.filter(x => (x.status === "Closed"));
      let user =  this.userSessionService.getSession('usersession') as UserSession;
      this.assaignedToMeTicketsData = this.totalTicketsDataMain.filter(x => x.assignedTo == user.emailId);
      this.createdByMeTicketsData = this.totalTicketsDataMain.filter( x=> x.createdBy == user.emailId);
    }

    if (this.teamId == undefined  || this.eaId == undefined || this.householdId == undefined) {
      this.totalTicketsData = this.totalTicketsDataMain.filter(x => x.status == "Open" || x.status == "In Progress");
    }


  }

get tickets service function

async getTickets(projectId: string): Promise<Ticket[]> {
        try {
            const url = ServiceConstants.apiUrl + `/tickets/getticketlist?projectId=${projectId}`;
            let response = await this.httpService.get(url, { headers: this.getHeaders() }).toPromise();
            return response as Ticket[];
        } catch (error) {
            this.handleError(error);
        }
    }

That because x is null and null does not have status property you have to debug and find out why x becames null in the loop — Yuriy

Rumjhum Singru Rumjhum Singru · Accepted Answer · 2021-04-23T12:34:18

If the first two of your if conditions do not follow, your this.totalTicketsDataMain will remain null. Trying to get this.totalTicketsData would then be impossible. Also, if all conditions do not follow, no status is set as open.

Error: Uncaught (in promise): TypeError: Cannot read property 'status' of null

1 Answers