How to receive an array of data from my Ionic Storage

Question

I need to send some data to my php that will handle them and send to my Cpanel database.

In my code, I can correctly save the data I want (image, latitude and longitude) in the Ionic Storage and also I can bring them to my page.

My post function for my php is also working correctly because I have tested send with static data.

My problem is time to bring the data already saved in Storage and carry out the same sending.

How can I access the Storage and bring this data to the function?

The function that does this sending is called Postdata.

Follows the code:

Script that takes/saves all data and saves to the database:

import { Injectable } from '@angular/core';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import { Storage } from '@ionic/storage';
import { Geolocation } from '@ionic-native/geolocation/ngx';

@Injectable({
  providedIn: 'root'
})
export class PhotoService {
  	lat: any;
  	long: any;
  	public photos: Photo[] = [];
	
	constructor(private geolocation: Geolocation, private camera: Camera, private storage: Storage) { }

	takePicture() {
	    this.geolocation.getCurrentPosition().then((resp) => {
      		this.lat = resp.coords.latitude;
      		this.long = resp.coords.longitude;
      	}).catch((error) => {
      		console.log('Error getting location page2', error);
    	});

	    const options: CameraOptions = {
	      quality: 100,
	      destinationType: this.camera.DestinationType.DATA_URL,
	      encodingType: this.camera.EncodingType.JPEG,
	      mediaType: this.camera.MediaType.PICTURE
	    };

		this.camera.getPicture(options).then((imageData) => {
			// Add new photo to gallery
			this.photos.unshift({
				latitude: this.lat,
				longitude: this.long,
				data: 'data:image/jpeg;base64,' + imageData
			});

			// Save all photos for later viewing
			this.storage.set('photos', this.photos);
			console.log("Latitude2: "+this.lat);
			console.log("Longitude2: "+this.long);
		}, (err) => {
		  	// Handle error
			console.log("Camera issue: " + err);
		});
  	}

	loadSaved() {
	  this.storage.get('photos').then((photos) => {
	    this.photos = photos || [];
	  });
	}

	dataSave() {
	  this.storage.get('photos').then((photos) => {
	  	this.photos = photos || [];
	    return (this.photos);
	  });
	}

	clear(){
		this.storage.clear();
		location.reload();
	}
}

class Photo {
  data: any;
  latitude: any;
  longitude: any;
}

Html:

<ion-header>
  <ion-toolbar>
    <ion-title>
      SEMEC <img id='logo' src="../assets/img/logo-prefeitura.png">
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col size="6" *ngFor="let photo of photoService.photos">
        <img [src]="photo.data" />
        <p>Latitude: {{photo.latitude}}</p>
        <p>Longitude: {{photo.longitude}}</p>
      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
  <ion-fab-button (click)="photoService.takePicture()">
    <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <button ion-button (click)="photoService.clear()"><ion-icon name="trash"></ion-icon>Apagar fotos</button>
  <button ion-button (click)="getRequest()"><ion-icon name="get"></ion-icon>Get</button>
  <button ion-button (click)="postData()"><ion-icon name="post"></ion-icon>Post</button>

  {{requestObject}}
  {{dataFromService}}

</ion-content>

Script to call photo-taking functions and send data via http

import { Component } from '@angular/core';
import { PhotoService } from '../services/photo.service';
import { HTTP } from '@ionic-native/http/ngx';
import { HttpClient, HttpHeaders} from '@angular/common/http';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})

export class Tab2Page {
  requestObject: any = null;
  dataFromService:any = "";
  itens:any = [];

  constructor(public photoService: PhotoService, public http: HttpClient, private httpget: HTTP) { }
  
  ngOnInit() {
    this.photoService.loadSaved();
  }

  getRequest(){
	 this.httpget.get('https://jsonplaceholder.typicode.com/posts/1', {}, {}).then( res => this.requestObject = res.data).catch( err => this.requestObject = err);
  }

  postData(){
   this.itens = this.photoService.dataSave();
   console.log(this.itens);
   var link = 'http://semecmaceio.com/maceio-geo/json/maceiogeoreports.php';
	 var myData = {image: this.itens.data, latitude: this.itens.latitude, longitude: this.itens.longitude, accuracy: 0};
	 
	 this.http.post(link, myData, {headers: new HttpHeaders({"Content-Type":"application/json"})})
	 .subscribe(dataFromService => {
	   this.dataFromService = JSON.stringify(dataFromService);
	 });
  } 
}

Answer 1

I’ve already found the mistake.

The problem was how I was returning the value.

Should be

dataSave() {
  this.storage.get('photos').then((photos) => {
    this.photos = photos || [];
  });
  return (this.photos);
}

And not:

dataSave() {
  this.storage.get('photos').then((photos) => {
    this.photos = photos || [];
    return (this.photos);
  });
}