Preventing data loss in an Ionic array - encountering issues with using this.array.push

Question

Preventing data loss in an Ionic array - encountering issues with using this.array.push

When attempting to use the storage get method to fill the array storedArr = [], I encounter the error message .push is not a function:

storedArr = this.storage.get('stored') ? this.storage.get('stored').then((e) => {e}) : [];

The crucial section of my code looks like this:

import { Storage } from '@ionic/storage';

export class MyPage {
    constructor(
        private storage: Storage) {
    }

    // storedArr = []; This approach works but resets the array

    storedArr = this.storage.get('stored') ? this.storage.get('stored').then((e) => {e}) : [];

    saveToStorage() {
        this.storedArr.push({ // .push is not a function
          title: 'blabla',
          body: 'more blabla'
        });

        this.storage.set('stored', this.storedArr);
    }
}

How can I modify that section of the code for it to work properly?

arrays angular typescript ionic-framework storage

Answer 1

Answer №1

The concept of Ionic's this.storage.get is that it returns a promise rather than an immediate value, which needs to be "subscribed" to in order to obtain the actual data.

When using

storedArr = this.storage.get('stored') ? this.storage.get('stored').then((e) => {e}) : [];

, it stores a promise inside storedArr on success, and still returns a promise even if it fails. This leads to an error because the Promise prototype does not have the push method. Therefore, the ternary operator resolves to true and [] will not get assigned to storedArr.

To correctly retrieve the value from this.storage.get('stored') in Ionic, you must subscribe to the returned promise and then assign the data parameter to storedArr. Here's how it should be done...

export class MyPage {
  storedArr = [];

  constructor(private storage: Storage) {
      this.storage.get('stored')
          .then(data => {
            this.storedArr = data;
          });
  }

  saveToStorage() {
      this.storedArr.push({ // .push is not a function
        title: 'blabla',
        body: 'more blabla'
      });

      this.storage.set('stored', this.storedArr);
  }
}

Answer 2

The concept of Ionic's this.storage.get is that it returns a promise rather than an immediate value, which needs to be "subscribed" to in order to obtain the actual data.

When using

storedArr = this.storage.get('stored') ? this.storage.get('stored').then((e) => {e}) : [];

, it stores a promise inside storedArr on success, and still returns a promise even if it fails. This leads to an error because the Promise prototype does not have the push method. Therefore, the ternary operator resolves to true and [] will not get assigned to storedArr.

To correctly retrieve the value from this.storage.get('stored') in Ionic, you must subscribe to the returned promise and then assign the data parameter to storedArr. Here's how it should be done...

export class MyPage {
  storedArr = [];

  constructor(private storage: Storage) {
      this.storage.get('stored')
          .then(data => {
            this.storedArr = data;
          });
  }

  saveToStorage() {
      this.storedArr.push({ // .push is not a function
        title: 'blabla',
        body: 'more blabla'
      });

      this.storage.set('stored', this.storedArr);
  }
}

Answer 3

Answer №2

In the case where you are storing something more complex than a basic primitive value, it is necessary to use JSON.parse() on the result obtained from the storage getter. The code snippet below demonstrates how this can be done. I have made use of the await keyword instead of using then for clarity.

var storageResult = await this.storage.get('stored');
storedArr = (storageResult) ? JSON.parse(storageResult) : [];

Furthermore, when you are storing an array, it is recommended to use JSON.stringify before saving it.

this.storage.set('stored', JSON.stringify(this.storedArr));

Answer 4

In the case where you are storing something more complex than a basic primitive value, it is necessary to use JSON.parse() on the result obtained from the storage getter. The code snippet below demonstrates how this can be done. I have made use of the await keyword instead of using then for clarity.

var storageResult = await this.storage.get('stored');
storedArr = (storageResult) ? JSON.parse(storageResult) : [];

Furthermore, when you are storing an array, it is recommended to use JSON.stringify before saving it.

this.storage.set('stored', JSON.stringify(this.storedArr));

Preventing data loss in an Ionic array - encountering issues with using this.array.push

Answer №1

Answer №2

Similar questions

Challenges encountered while developing Angular FormArrays: Managing value changes, applying validators, and resolving checkbox deselection

The compilation of the Angular application is successful, however, errors are arising stating that the property does not exist with the 'ng build --prod' command

How to bring in images from the assets folder using React and Typescript

"Unlocking the full potential of Typescript and Redux: Streamlining the use of 'connect' without the need to

Tips for managing errors when using .listen() in Express with Typescript

What is the process for mocking a method from a class that is instantiated within another class using ts mockito in typescript?

Encountering this issue? Error TS2304: Name not found

How can you restrict the number of characters a user can input into an Angular input textbox?

How can I combine multiple requests in RxJS, executing one request at a time in parallel, and receiving a single combined result?

"Conceal Digits with SweetAlert2's Number Mask

Storing multiple email addresses in an array using an HTML input element

Executing a designated assessment in Protractor

What is the most effective method to verify if all elements in an array fall within a specified range

Click the link to copy it and then paste the hyperlink

In the context of Angular applications, how can a state be defined?

What sets apart ".. let i = index" from "..let i as index"?

Creating an array of objects in Javascript by setting two different values as a range

Angular 2 offers the ability to crop and save images effortlessly

Can you iterate through two arrays to find common values?

How can I use req.value in Node.js Express middleware to set values for uploading options in Ionic Cordova FileTransfer?