Transferring an array of data across different screens within an Ionic 2 application

Question

Transferring an array of data across different screens within an Ionic 2 application

I am a newcomer to Ionic 2 and I am encountering difficulties when it comes to passing data between pages. Within my Home.ts file, there exists a global array containing certain numbers that have been calculated. My intention is to transfer this array to my Table.ts file in order to display it within an HTML table using the *ngFor method.

Below is the function within Home.ts where I populate the array and attempt to push (I will omit the actual calculations since I am confident they are accurate).


import { Component } from '@angular/core';
import { AlertController } from 'ionic-angular';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Table } from '../table/table';

export class HomePage {

    averagesList: Array<number> = [];

    constructor(public alerCtrl: AlertController,
        public navCtrl: NavController,
        public navParams: NavParams) {}

    Calculate() {
    
        var Averages = [];

        // Calculations on the 'Averages' Array
        
        this.averagesList = Averages;

        this.navCtrl.push(Table, this.averagesList);
        
    }

}

When attempting to display this data in my Table.ts file, I receive an undefined result.


import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HomePage } from '../home/home';

@IonicPage()
@Component({
selector: 'page-table',
templateUrl: 'table.html',
})
export class Table{

constructor(public navCtrl: NavController, public navParams: NavParams) {}

ionViewDidLoad() {
    console.log(this.navParams.get('averagesList'));
}

}

I have experimented with passing a let variable which was successful, so why does it not function as expected with arrays?

angularjs arrays typescript ionic2

Answer 1

Answer №1

The error lies in utilizing

console.log(this.navParams.get('averagesList'));

In this case, 'averagesList' serves as the identifier.

To access it correctly, you must pass it like so:

this.navCtrl.push(Table,{'averagesList' : this.averagesList});

Otherwise:

If you simply send it as

this.navCtrl.push(Table,this.averagesList);

You can retrieve the value in this manner:

console.log(this.navParams.data);

Answer 2

The error lies in utilizing

console.log(this.navParams.get('averagesList'));

In this case, 'averagesList' serves as the identifier.

To access it correctly, you must pass it like so:

this.navCtrl.push(Table,{'averagesList' : this.averagesList});

Otherwise:

If you simply send it as

this.navCtrl.push(Table,this.averagesList);

You can retrieve the value in this manner:

console.log(this.navParams.data);

Answer 3

Answer №2

Services are a great way to achieve this task. Similar to Angular 2, you can bring in your service within the constructor and access its properties like so:

import {OnInit} from '@angular/core';
import {someService} from ./somepath;
 ...
 export class someClass implements OnInit{
let myTempVariable; //store shared data here
constructor (private smService: someService){ ... }
ngOnInit{ 
   this.myTempVariable = this.smService.SharedServiceData;
}
...
}

Answer 4

Services are a great way to achieve this task. Similar to Angular 2, you can bring in your service within the constructor and access its properties like so:

import {OnInit} from '@angular/core';
import {someService} from ./somepath;
 ...
 export class someClass implements OnInit{
let myTempVariable; //store shared data here
constructor (private smService: someService){ ... }
ngOnInit{ 
   this.myTempVariable = this.smService.SharedServiceData;
}
...
}

Answer 5

Answer №3

Utilizing a service to pass nested data is recommended, especially in scenarios involving calculations objects.

You can implement a messageService and monitor changes by using the code snippet below.

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import {Subject} from 'rxjs/Subject';

@Injectable()

 export class LocalMsgService {  

private subject = new Subject();

sendMessage(message) {
    this.subject.next(message);
}

clearMessage() {
    this.subject.next();
}

  getMessage(): Observable<any> {
     return this.subject.asObservable();
  }
}

The above service can be utilized in your home.ts and table.ts components as shown below

Home.ts

    //other imports go here 
    import {LocalMsgService} from 'services/localMsg';


    @Component({
        selector: 'home-component',
        templateUrl: 'home.html'
    })
    export class HomePage {
        constructor( private msgService: LocalMsgService) {

          }

        dataToPass() {
            console.log(this.averagesList);
            this.msgService.sendMessage(this.averagesList);
        }

    }

Table.ts

       //other imports go here 
       import {LocalMsgService} from 'services/localMsg';
       import {Subscription} from 'rxjs/Subscription';


        @Component({
           selector: 'page-table',
          templateUrl: 'table.html',
        })

        export class TablePage{

            items: any;
            subscription: Subscription;

            constructor(
            public localMsgService : LocalMsgService) {
                this.subscription = this.localMsgService.getMessage().subscribe(msg => {
                    this.items = msg;
                });
            }

        }

Answer 6

Utilizing a service to pass nested data is recommended, especially in scenarios involving calculations objects.

You can implement a messageService and monitor changes by using the code snippet below.

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import {Subject} from 'rxjs/Subject';

@Injectable()

 export class LocalMsgService {  

private subject = new Subject();

sendMessage(message) {
    this.subject.next(message);
}

clearMessage() {
    this.subject.next();
}

  getMessage(): Observable<any> {
     return this.subject.asObservable();
  }
}

The above service can be utilized in your home.ts and table.ts components as shown below

Home.ts

    //other imports go here 
    import {LocalMsgService} from 'services/localMsg';


    @Component({
        selector: 'home-component',
        templateUrl: 'home.html'
    })
    export class HomePage {
        constructor( private msgService: LocalMsgService) {

          }

        dataToPass() {
            console.log(this.averagesList);
            this.msgService.sendMessage(this.averagesList);
        }

    }

Table.ts

       //other imports go here 
       import {LocalMsgService} from 'services/localMsg';
       import {Subscription} from 'rxjs/Subscription';


        @Component({
           selector: 'page-table',
          templateUrl: 'table.html',
        })

        export class TablePage{

            items: any;
            subscription: Subscription;

            constructor(
            public localMsgService : LocalMsgService) {
                this.subscription = this.localMsgService.getMessage().subscribe(msg => {
                    this.items = msg;
                });
            }

        }

Transferring an array of data across different screens within an Ionic 2 application

Answer №1

Answer №2

Answer №3

Similar questions

I am attempting to incorporate an NPM package as a plugin in my Next.js application in order to prevent the occurrence of a "Module not found: Can't resolve 'child_process'" error

Utilizing Laravel's whereJsonContains for JSON Where Clauses

Customize your Joi message using the .or() method

What could be causing the error message (No overload matches this call) to pop up when attempting to subscribe to .valueChanges() in order to retrieve data from Firestore?

"Enhance your development experience with the TypeScript definitions for the Vue 2 plugin

The @input field is failing to show the value entered by the user

What is the best way to iterate through one level at a time?

Implement Angular backend API on Azure Cloud Platform

Sending data from a parent scope to a directive's controller

What steps are involved in setting up a search results page for example.com/s/keyword?

Converting a text file to JSON in TypeScript

Display the list in a grid format with 4 columns and x number of rows by utilizing Angular and Bootstrap

How can I display options in a react autocomplete feature?

The detection of my query parameters is not working as expected

Avoid saying the same thing more than once

The art of combining Angular 6 with CSS styling for dynamic

What's the best way to code a loop that can accurately list the days of the month?

"Utilizing Firebase Functions to update information in the Firebase Realtime Database on a daily basis

angular8StylePreprocessorSettings

Transferring information between Puppeteer and a Vue JS Component