Adding an array to native storage

Ionic Framework ionic-v3
1

I am trying to build an app that will allow a user to scan a barcode, then save the time this barcode was scanned to native storage.
Then each time the user uses the application, they can continue to add successful scans (times) to native storage.

I have found that when I just set a date, it overwrites the previous date. So what I thought to do is take the existing date(s), add them to an array, add the new date to this array then put all this back into native storage.
However what I find is that when the user changes page, then returns to the scan page and adds a date to the array, its adding an entire new array into the old array as one variable rather than separate entries to this array.

How can I resolve this?

My code is -
export class ScanSession {

emptyArray = [];

ionViewDidEnter(){
this.nativeStorage.getItem(‘scans’)
.then(
data => this.emptyArray.push(JSON.parse(data)),
)
console.log(“Saved Scan Data Loaded”)
}

constructor(private barcodeScanner: BarcodeScanner, private nativeStorage: NativeStorage) {
}

   //Test to see if data is being saved
  ShowDataTest(): any{
    this.nativeStorage.getItem('scans')
    .then(
      data => console.log(data)
    )
  }

ScanCode() : any{

this.barcodeScanner.scan().then((barcodeData) => {
let inputString = “testData”;

if( barcodeData.text == inputString){
            
  this.emptyArray.push(Date());
  this.nativeStorage.setItem('scans', JSON.stringify(this.emptyArray))
  console.log("Scan successfully added")      
  
} else {
  console.log("Doesnt Match");
}

}, (err) => {

});
};
}

1 Like
2

maybe you should make a provider for this purpose.

3

How would I use that in this example? Ive not really used providers before so am unaware how they work.

4

You said you have a problem with page change. Providers are running in the background not on each of your pages, so you can call them from every page, but they don’t create multiple instances of your variable.
(Bad explaination - it’s allready to late for me to think correctly…)

Anyways you do ionic g provider BarcodeTracker and then you import this new provider in your pages and access the functions on it that you moved to it(move all storage logic to it.)

Just search the internet if you want to know more about providers (or you could also search this forum I guess) : https://www.google.de/search?q=ionic+providers

1 Like
5

Yes, the problem is that when I change pages, when I return to that page and add a new scan it will create a new array and add it to the old array.

I see what you mean with providers, however I dont see how that will help me take items from native storage, add to them and return them.

I will search abit more in the morning and test it out. But do you mind giving me a suggestion on how to do this and what I need to do?

6

In your Provider could look like this::

import { Injectable } from '@angular/core';

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

@Injectable()
export class BarcodeTracker {
  data:{scantime:Date,scanvalue:number}[]=[];

  constructor(private storage: Storage ) {
    platform.ready().then(() => {
          this.storage.ready().then( _ => {
           this.nativeStorage.getItem('scans').then((d)=>{
            this.data = (d != null)?d:[];
          });
       });
    });
  }

public getScans(){
 return this.data;
}
// This function returns a promise, so you can catch errors on your page
public addScan(time:Date,value:number):Promise<any> {
 this.data.push( {scantime:time, scanvalue:value} );
 return this.nativeStorage.setItem('scans', this.data);
}

}

that should work.

7

Thanks for the reply.

I am trying to use this code, I’ve changed a little such as Storage to Native Storage as that’s what I’ve been using.

However I am getting an error saying cannot find name ‘platform’, and also property ‘ready’ does not exist on type ‘NativeStorage’.

Also just so my understanding is correct. Is the idea to call this function on a successful scan, and this will then add the scan to an array on native storage?

How do I call the function addScan from within my scanSession page? I thought I would just be able to go to my ScanCode function, and after the if check call it there, but it doesnt seem to work this way.

EDIT - Resolved platform error by importing platform.
EDIT2 - Resolved ready error by using storage, I shouldnt have changed your code.

8

I admit that I missed to add that.

import the provider on the top, include it in your constructor, then you can call the functions on it.

PS: when you didn’t used ionic g provider to generate the provider file, you also have to add the provider in your src\app\app.module.ts

9

I have imported BarcodeTracker at top of scanSession.
Included it in the constructor as - plublic barcodeTracker: BarcodeTracker
Checked app.module.ts, it automatically added it there but name was wrong so I changed this to be correct.

But when I now type addScan(); or even barcodeTracker.addScan, nothing is coming up? Says it cannot find it.

10

this.barcodeTracker.addScan?
and is it imported in the constructor as private or public? no prefix will not work, I guess.

11

Thanks, I have got this piece working now.
I am getting some errors though. When I run the scanner it will successfully scan, but console shows this error - ERROR Error: Uncaught (in promise): [object Object]

I also tried using the getScans function to check data, I added a console.log(this.data); to it.
However when I run this I get these errors -
ERROR TypeError: co.ShowDataTest is not a function
ERROR CONTEXT DebugContext {view: {…}, nodeIndex: 30, nodeDef: {…}, elDef: {…}, elView: {…}}

How do I run a test to see what has been saved?

EDIT - Tried a simple -
ShowDataTest(): any{
this.nativeStorage.getItem(‘scans’)
.then(
data => console.log(data)
)
}
To test whats being saved. Get this error -
ERROR Error: Uncaught (in promise): [object Object]

12 
this.barcodeTracker.getScans()
.then((data)=>{
 console.log(data);
})
.catch((err)=>{
console.error(err);
});

You don’t have to run any tests other that catching on error.

13

I’m getting an error saying - Property ‘then’ does not exist on type '{ scantime: Date; scanvalue: number; } '.

14

ok sorry that was wrong - the add function gets called like this, the get function returns it right away.

15

Ahh I kind of see what you mean. But how then can I view whats been saved in native storage?
Also how do I resolve this error - ERROR Error: Uncaught (in promise): [object Object]

I am getting that error when I try to save to native storage, and also when I used -
ShowDataTest(): any{
this.nativeStorage.getItem(‘scans’)
.then(
data => console.log(data)
)
}

16

try renaming the var (the key for storage) that is saved, maybe it conflicts with some of your old test data.

and try to add console.log() statements on the way to spot the exact location of the error.

17

also try adding .catch( console.error ) to catch all errors.

18

OK - I changed the ‘scans’ name, and deleted the app and reinstalled to clear the storage too.

What I’ve noticed is that as soon as I enter the scanSession page I get the error -
RROR Error: Uncaught (in promise): [object Object]

This error is given again when I use -
ShowDataTest(): any{
this.nativeStorage.getItem(‘newScans’)
.then(
data => console.log(data)
)
}

Also dotted .catch(console.error) around. Noticed that I get this error -
NativeStorageError {code: 2, source: “Native”, exception: null}
When I load scanSession page, or click the above code to show native storage saves.

19

this.nativeStorage.getItem(‘scans’).then((d)=>{ this.data = (d != null)?d:[]; });
add here in your provider a catch block.

Have you correctly configured ionic storage before using? Try searching your error on google.

20

make sure you followed that instructions: https://ionicframework.com/docs/storage/