Having trouble accessing the database in Angular and Ionic through a provider on a Tabbed page

I created a Home page with tabs using Ionic 3 and Angular. The tabs are named Stats and Calc. When clicking on the Stats tab, it triggers the class/component stats.ts (displayed below).

This component utilizes two providers: CropProvider and ContractProvider, which query the database and retrieve records. These providers work correctly on other pages and can successfully fetch data from SQLite DB. However, when accessed through the tabbed pages, I encounter the following error message.

Error:

Error: Uncaught (in promise): TypeError: Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at StatsPage.webpackJsonp.168.StatsPage.buildStats (http://192.168.0.5:8100/build/main.js:707:51)
    ...

Stats.ts

... ... ...

home.html

... ...

home.ts

... ...

Console Logs:

[app-scripts] [23:20:57]  console.log: Into the stats page........
[app-scripts] [23:20:57]  console.log: cropProvider: [object Object]
[app-scripts] [23:20:57]  console.log: contractProvider: [object Object]
[app-scripts] [23:20:57]  console.log: crops:undefined
[app-scripts] [23:20:57]  console.log: contracts:undefined

I am unsure why I am facing this issue even after injecting them in the constructor. Any insights would be appreciated.

angulartypescriptionic-frameworkionic3

Answer №1

In order to properly utilize the properties of crops and contracts, it is essential to initialize them before populating with values. Since I am not aware of the specific properties of crops, I am unable to demonstrate how to initialize all the array properties. Nonetheless, for a standard array, the following initialization will suffice.

this.crops = [];
this.contracts = [];

Consequently, your code should resemble the following:

...
console.log("Into the stats page........");
console.log("cropProvider: " + cropProvider);
console.log("contractProvider: " + contractProvider);

this.crops = [];
this.contracts = [];

this.cropProvider.getAllCrops()
  .then((crops: Crop[]) => {
    this.crops = crops;
  })
  .catch(e => console.error(e));
...

Just so you know: Incorporating business logic within the constructor is considered a suboptimal practice.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the navigation features and states within the world of the Ionic framework

I am in the process of creating an app that saves information locally the first time it is used. My goal is for a different page to be displayed each subsequent time the app is opened. However, I am facing an issue with loading a simple page (not a templat ...

angularjsionic-framework

I am facing an issue with calling a controller from an HTTP GET request in ASP.Net Core 6 using a Single Page Application (SPA) endpoint

[UNSOLVED] - Seeking help from developers [Issue] As a newcomer to the industry, I apologize for my lack of experience in advance. I am currently facing a challenge with ASP.Net Core 6 and it seems like I am missing something simple, but I can't see ...

c#angularasp.net-coresingle-page-applicationendpoint

Make sure to utilize flatMap to call the second API every time

I am utilizing two APIs, API1 and API2. The output from API1 is used as an input for API2. In case the call to API1 fails, I still want API2 to be invoked with a blank value. this.Api1().pipe(flatMap(result => { return this.Api2(result); })).subscrib ...

angularrxjsobservableangular8flatmap

What is the best way to extract a specific value from a JSON object?

I'm currently working on building a marketplace using Angular. The main marketplace page is already set up and populated with data from a remote JSON file created with mockapi. However, I've encountered an issue when trying to display a single ra ...

jsonangularangularjstypescriptdatabase

Is there a counterpart to ES6 "Sets" in TypeScript?

I am looking to extract all the distinct properties from an array of objects. This can be done efficiently in ES6 using the spread operator along with the Set object, as shown below: var arr = [ {foo:1, bar:2}, {foo:2, bar:3}, {foo:3, bar:3} ] const un ...

javascripttypescriptecmascript-6set

Troubleshooting issue with alignment in Material UI using Typescript

<Grid item xs={12} align="center"> is causing an issue for me No overload matches this call. Overload 1 of 2, '(props: { component: ElementType<any>; } & Partial<Record<Breakpoint, boolean | GridSize>> & { ...

cssreactjstypescriptmaterial-ui

An issue has been detected by Zone.js where the ZoneAwarePromise `(window|global).Promise` has been unexpectedly replaced

I have recently integrated the Angular2 quickstart code into my existing webpack setup, but I seem to be facing an issue where something is interfering with the promise from zone.js, resulting in an error. Based on my research on Stack Overflow, it appears ...

javascriptangulartypescriptwebpack

Connecting the SelectedItem of a listbox in ngPrime to an Observable Collection in Angular2

I am facing an issue while trying to use the ngPrime listbox in Angular2. I have a scenario where I am fetching an array of objects from Firebase as an observable and attempting to display it correctly in the listbox. <div *ngIf="addContactDialogVisibl ...

angulartypescriptfirebase-realtime-databaseprimeng

Button for saving content located in expo-router header

I am a beginner in react native and I am attempting to connect a save button in a modal header using expo-router. I have managed to make the button work within the modal itself, but I would like it to be located in the header set by expo-router. It doesn&a ...

typescriptreact-nativeexporeact-hook-formexpo-router

Tips for organizing and controlling various segments of your Angular 2 application

I am working with a specific template and I want to organize my application using ASP.NET Areas. Let's consider a website that has a public area and an admin area. Currently, I can display the home area without any issues, but I am unsure about how to ...

angularasp.net-coreangular2-routing

Error encountered while uploading a file with Fastify and Nestjs

I encountered an issue while attempting to upload a file to my nest.js server, receiving the following error message: Error: Unsupported Media Type: multipart/form-data; boundary=--------------------------140603536005099484714904 https://i.sstatic.net/ ...

node.jsangulartypescriptfile-uploadnestjs

Encountering issues with bidirectional data binding functionality

I have integrated a pagination component from ng-bootstrap into a generic component that includes a select dropdown to choose the number of items per page. I triggered an event from this generic component and caught it in the parent component (member-list. ...

javascriptangulartypescripttwo-way-binding

How can a border be applied to a table created with React components?

I have been utilizing the following react component from https://www.npmjs.com/package/react-sticky-table Is there a method to incorporate a border around this component? const Row = require("react-sticky-table").Row; <Row style={{ border: 3, borderco ...

javascriptreactjstypescript

Leverage the SVG foreignObject Tag within your Angular 7 project

I am currently working with Angular 7 and trying to use the SVG foreignObject to embed some HTML code. However, I am encountering an issue where Angular fails to recognize the HTML tags and throws an error in the terminal. Below is the code snippet: &l ...

angularsvg

What is the best way to specify types for a collection of objects that all inherit from a common class?

I am new to typescript and may be asking a beginner question. In my scenario, I have an array containing objects that all extend the same class. Here is an example: class Body{ // implementation } class Rectangle extends Body{ // implementation } class ...

typescript

Using the currency pipe with a dynamic variable in Angular 2

My application utilizes CurrencyPipe, The current implementation is functional, <div class="price">{{123 | currConvert | currency:'USD':true:'3.2-2'}}</div> Now, I need to dynamically pass the currency from a model varia ...

angulartypescriptcurrency-pipe

Discover how to access and manipulate JSON files in an Angular application using

Currently, I am diving into learning TypeScript with Angular and I'm interested in reading a JSON file. The structure of my JSON file is as follows: { "nb": "7", "extport": "1176",, "REQ_EMAIL": ...

htmljsonangulartypescript

Utilize Typescript to ensure uniformity in object structure across two choices

Looking to create a tab component that can display tabs either with icons or plain text. Instead of passing in the variant, I am considering using Typescript to verify if any of the icons have an attribute called iconName. If one icon has it, then all othe ...

typescripttypescript-typings

Creating a custom design for ng-bootstrap accordion using CSS styling

I've encountered an issue with my Angular 2 component that utilizes an accordion from ng-bootstrap. While the functionality works perfectly, I'm facing a problem with applying custom styles using the .card, .card-header, and .card-block classes o ...

cssangularng-bootstrap

Issue with Angular 5 EventEmitter causing child to parent component emission to result in undefined output

I've been trying to pass a string from a child component to its parent component. Child Component: //imports... @Component({ selector: 'child', templateUrl: './child.component.html', styleUrls: ['./child.c ...

angulartypescriptangular5